properties on organization details view

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.11.1
+FROM node:20.12.1
 
 # install pnpm
 RUN npm install --global pnpm@8

.github/workflows/scorecard.yml

@@ -67,6 +67,6 @@ jobs:
 
  # Upload the results to GitHub's code scanning dashboard.
  - name: "Upload to code-scanning"
- uses: github/codeql-action/upload-sarif@e56cfd0877b4826be144d11aa31e6c64a55828e9 # v2.24.7
+ uses: github/codeql-action/upload-sarif@a82bad71823183e5b120ab52d521460ecb0585fe # v2.24.9
  with:
  sarif_file: results.sarif

Dockerfile.tasks

@@ -1,4 +1,4 @@
-FROM node:20.11.1 as build
+FROM node:20.12.1 as build
 ENV NEXT_TELEMETRY_DISABLED 1
 ARG WS="@helpwave/tasks"
 
@@ -22,7 +22,7 @@ COPY lib ./lib/
 COPY tasks ./tasks/
 RUN pnpm --filter $WS run build
 
-FROM node:20.11.1-alpine
+FROM node:20.12.1-alpine
 
 LABEL maintainer="[email protected]"
 

landing-page/components/TeamMember.tsx

@@ -36,12 +36,12 @@ const TeamMember = ({
  const shorthand = role.split(' ').at(0) === 'Chief' ? role.split(' ').map(word => word.at(0)).join('') : null
 
  return (
- <div className={tw('mb-8 w-1/2 text-center p-8 min-w-[300px]')}>
+ <div className={tw('flex flex-col h-full mb-8 w-1/2 text-center p-8 min-w-[300px] items-center')}>
  <Image alt="Profilepicture" src={backedPictureURL} style={{ objectFit: 'contain' }} width={size} height={size} className={tx(`w-[${size}px] tansition-all duration-500 shadow-md hover:shadow-2xl rounded-full object-center m-auto mb-6`)}/>
  <h4 className={tw('font-space text-gray-600 text-lg h-[32px]')}>{title}</h4>
  <h2 className={tw('text-3xl font-inter')}>{name}</h2>
  <h3 className={tw('mt-4 text-2xl font-space')}>{role} <span className={tw('text-md text-sm font-sans')}>{shorthand}</span></h3>
- <h4 className={tw('mt-2 text-lg font-space leading-none justify-center flex flex-wrap gap-2 text-gray-600')}> {generatedSocials} {hashTags}</h4>
+ <h4 className={tw('mt-2 text-lg font-space leading-none justify-center flex flex-wrap gap-2 text-gray-600 max-w-[300px]')}> {generatedSocials} {hashTags}</h4>
  </div>
  )
 }

landing-page/components/sections/landing/ExpansionSection.tsx

@@ -28,7 +28,7 @@ const defaultExpansionTranslation: Record<Languages, ExpansionSectionTranslation
 const ExpansionSection = ({ overwriteTranslation }: PropsForTranslation<ExpansionSectionTranslation>) => {
  const translation = useTranslation(defaultExpansionTranslation, overwriteTranslation)
  return (
- <div className={tw('pb-16')}>
+ <div className={tw('py-16')}>
  <h1 className={tw('w-full text-3xl text-center font-space')}>{translation.germanyHealthcareSystem}</h1>
 
  <div className={tw('mt-8 w-full flex flex-wrap gap-16 justify-evenly items-center')}>

landing-page/components/sections/tasks/FeatureSection.tsx

@@ -1,8 +1,40 @@
 import { Span } from '@helpwave/common/components/Span'
 import { tw, tx } from '@helpwave/common/twind'
 import Image from 'next/image'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 
-const FeatureSection = () => {
+type FeatureSectionTranslation = {
+ taskTemplatesTitle: string,
+ taskTemplatesText: string,
+ collaborateTitle: string,
+ collaborateText: string,
+ patientsTitle: string,
+ patientsText: string
+}
+
+const defaultFeatureSectionTranslation: Record<Languages, FeatureSectionTranslation> = {
+ en: {
+ taskTemplatesTitle: 'Task Templates',
+ taskTemplatesText: 'Save repetitive tasks as templates. Standardize your workflows, share them with your team.',
+ collaborateTitle: 'Collaborate',
+ collaborateText: 'You and your team synchronized on the same heartbeat.',
+ patientsTitle: 'Patients',
+ patientsText: 'Modern dashboards for your patients. Keep track of their progress and tasks.'
+ },
+ de: {
+ taskTemplatesTitle: 'Aufgabenvorlagen',
+ taskTemplatesText: 'Speichere sich wiederholende Aufgaben als Vorlagen. Standardisiere deine Arbeitsabläufe und teile sie mit deinem Team.',
+ collaborateTitle: 'Zusammenarbeiten',
+ collaborateText: 'Du und dein Team arbeiten auf den Herzschlag synchronisiert zusammen.',
+ patientsTitle: 'Patienten',
+ patientsText: 'Moderne Dashboards für deine Patienten. Behalte den Überblick über den Fortschritt und deine Aufgaben.'
+ }
+}
+
+const FeatureSection = ({ overwriteTranslation }: PropsForTranslation<FeatureSectionTranslation>) => {
+ const translation = useTranslation(defaultFeatureSectionTranslation, overwriteTranslation)
  const screenshotTemplates = 'https://cdn.helpwave.de/screenshots/tasks_2.png'
  const screenshotCollab = 'https://cdn.helpwave.de/screenshots/tasks_3.png'
  const screenshotPatients = 'https://cdn.helpwave.de/screenshots/tasks_4.png'
@@ -17,23 +49,23 @@ const FeatureSection = () => {
 
  <div className={tw('w-1/3')}>
  <span className={tw('text-4xl font-space')}>
- Task Templates
+ {translation.taskTemplatesTitle}
  </span>
  <br />
  <Span type="description" className={tw('text-gray-600')}>
- Save repetitive tasks as templates. Standardize your workflows, share them with your team.
+ {translation.taskTemplatesText}
  </Span>
  </div>
  </div>
 
  <div className={tw('pb-8 items-center desktop:gap-16 tablet:px-8 desktop:px-0 flex flex-wrap justify-between')}>
  <div className={tw('w-1/3 text-end')}>
  <span className={tw('text-4xl font-space')}>
- Collaborate
+ {translation.collaborateTitle}
  </span>
  <br />
  <Span type="description" className={tw('text-gray-600')}>
- You and your team synchronized on the same heartbeat.
+ {translation.collaborateText}
  </Span>
  </div>
 
@@ -49,11 +81,11 @@ const FeatureSection = () => {
 
  <div className={tw('w-1/3')}>
  <span className={tw('text-4xl font-space')}>
- Patients
+ {translation.patientsTitle}
  </span>
  <br />
  <Span type="description" className={tw('text-gray-600')}>
- Modern dashboards for your patients. Keep track of their progress and tasks.
+ {translation.patientsText}
  </Span>
  </div>
  </div>

landing-page/components/sections/tasks/ReachoutSection.tsx

@@ -1,21 +1,70 @@
 import { tw } from '@helpwave/common/twind'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
+
+type ReachoutSectionTranslation = {
+ medicalHeroTitle: string,
+ medicalHeroSubtitle: string,
+ medicalHeroText: string,
+ hospitalManagerTitle: string,
+ hospitalManagerSubtitle: string,
+ hospitalManagerText: string
+}
+
+const defaultReachoutSectionTranslation: Record<Languages, ReachoutSectionTranslation> = {
+ en: {
+ medicalHeroTitle: `You're a medical hero?`,
+ medicalHeroSubtitle: 'How \\helpwave \\primary{tasks} aims to aid you in your daily work!',
+ medicalHeroText: `
+ \\helpwave \\primary{tasks} is a modern kanban interface that helps you to coordinate your work and the work of your team. Note down your tasks for your patient for yourself and for your team.
+ Standardize workflows by saving them as a template and share them with your new coworker for easy onboarding. Receive notifications about upcoming tasks and use our various dashboards for
+ keeping track of patients and courses of treatment. \\helpwave \\primary{tasks} is the first open-source team management platform for healthcare workers.`,
+ hospitalManagerTitle: `You're a hospital administrator?`,
+ hospitalManagerSubtitle: 'How \\helpwave \\primary{tasks} can solve your issues!',
+ hospitalManagerText: `
+ \\helpwave \\primary{tasks} has been inspired by modern industry work flows and best practices from lean project management and applies them to the clinical environment.
+ Keeping track of tasks and workflows in a clinical environment leads to better patient care and a more efficient use of resources.
+ \\helpwave \\primary{tasks} can increase worker satisfaction and patient safety. Use it as a secure basis for your billing processes.
+ `
+ },
+ de: {
+ medicalHeroTitle: 'Du bist ein medical hero?\n',
+ medicalHeroSubtitle: '\\helpwave \\primary{tasks} zielt darauf ab, dich bei deiner täglichen Arbeit zu unterstützen!',
+ medicalHeroText: `
+ \\helpwave \\primary{tasks} ist ein modernes Kanban-Interface, das dabei hilft, deine Arbeit und die Arbeit deines Teams zu koordinieren. Notiere dir deine Aufgaben für deine Patienten, für dich selbst und für dein Team.
+ Standardisiere deine Workflows, indem du sie als Vorlage speicherst und mit neuen Kollegen für ein einfaches Onboarding teilst. Erhalte Benachrichtigungen über bevorstehende Aufgaben und nutzen unsere verschiedenen Dashboards,
+ um Patienten und deren Behandlungsverlauf zu verfolgen. \\helpwave \\primary{tasks} ist die erste Open-Source-Team-Management-Plattform für Mitarbeiter im Gesundheitswesen.
+ `,
+ hospitalManagerTitle: 'Du arbeitest in der Krankenhausverwaltung?',
+ hospitalManagerSubtitle: 'Wie \\helpwave \\primary{tasks} deine Probleme auch hier lösen kann!',
+ hospitalManagerText: `
+ \\helpwave \\primary{tasks} wurde von modernen Arbeitsabläufen und Best Practices aus dem Lean-Projektmanagement inspiriert und wendet diese Methodiken auf die klinische Umgebung an.
+ Die Verfolgung von Aufgaben und Arbeitsabläufen in einem klinischen Umfeld führt zu einer besseren Patientenversorgung und einer effizienteren Nutzung von Ressourcen.
+ \\helpwave \\primary{tasks} kann die Zufriedenheit der Mitarbeiter und die Patientensicherheit erhöhen. Du kannst \\helpwave \\primary{tasks} auch als sichere Grundlage für deine Abrechnungsprozesse verwenden.
+ `
+ }
+}
+
+const ReachoutSection = ({ overwriteTranslation }: PropsForTranslation<ReachoutSectionTranslation>) => {
+ const translation = useTranslation(defaultReachoutSectionTranslation, overwriteTranslation)
 
-const ReachoutSection = () => {
  return (
  <div className={tw('pt-32 pb-16 text-xl text-center')}>
- <h2 className={tw('font-space text-4xl font-bold')}>{`You're a medical hero?`}</h2>
+ <h2 className={tw('font-space text-4xl font-bold')}>{translation.medicalHeroTitle}</h2>
  <h3 className={tw('font-sans text-1xl font-medium mt-2 mb-2 text-gray-600')}>
-  How <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> aims to aid you in your daily work!
+ <MarkdownInterpreter text={translation.medicalHeroSubtitle}/>
  </h3>
  <p className={tw('mb-5')}>
-  <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> is a modern kanban interface that helps you to coordinate your work and the work of your team. Note down your tasks for your patient for yourself and for your team. Standardize workflows by saving them as a template and share them with your new coworker for easy onboarding. Receive notifications about upcoming tasks and use our various dashboards for keeping track of patients and courses of treatment. <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> is the first open-source team management platform for healthcare workers.
+ <MarkdownInterpreter text={translation.medicalHeroText}/>
  </p>
- <h2 className={tw('font-space text-4xl font-bold')}>{`You're a hospital administrator?`}</h2>
+ <h2 className={tw('font-space text-4xl font-bold')}>{translation.hospitalManagerTitle}</h2>
  <h3 className={tw('font-sans text-1xl font-medium mt-2 mb-2 text-gray-600')}>
-  How <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> can solve your issues!
+ <MarkdownInterpreter text={translation.hospitalManagerSubtitle}/>
  </h3>
  <p>
-  <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> has been inspired by modern industry work flows and best practices from lean project management and applies them to the clinical environment. Keeping track of tasks and workflows in a clinical environment leads to better patient care and a more efficient use of resources. <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> can increase worker satisfaction and patient safety. Use it as a secure basis for your billing processes.
+ <MarkdownInterpreter text={translation.hospitalManagerText}/>
  </p>
  </div>
  )

landing-page/components/sections/tasks/StartSection.tsx

@@ -2,8 +2,30 @@ import { tw, tx } from '@helpwave/common/twind'
 import { Link as LinkIcon, Mouse } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
+
+type StartSectionTranslation = {
+ title: string,
+ text: string
+}
+
+const defaultStartSectionTranslation: Record<Languages, StartSectionTranslation> = {
+ en: {
+ title: 'The first open-source team management platform for healthcare workers',
+ text: '\\helpwave \\primary{tasks} increases the productivity in your clinical team. Ditch your print-out ward list and coordinate your work and the work of your team in a modern kanban interface. \\helpwave \\primary{tasks} has been inspired by modern industry work flows and best practices from lean project management and applies them to the clinical environment.'
+ },
+ de: {
+ title: 'Die erste Open-Source-Team-Management-Plattform für Mitarbeitende im Gesundheitswesen',
+ text: '\\helpwave \\primary{tasks} erhöht die Produktivität in deinem klinischen Team. Lass die ausgedruckten Stationslisten hinter dir und koordiniere deine Arbeit und die deines Teams mit einem modernen Kanban-Interface. \\helpwave \\primary{tasks} wurde von modernen Arbeitsabläufen und Best Practices aus dem Lean-Projektmanagement inspiriert und wendet diese Methodiken auf die klinische Umgebung an.'
+ }
+}
+
+const StartSection = ({ overwriteTranslation }: PropsForTranslation<StartSectionTranslation>) => {
+ const translation = useTranslation(defaultStartSectionTranslation, overwriteTranslation)
 
-const StartSection = () => {
  const demoURL = 'https://staging-tasks.helpwave.de'
  const screenshotURL = 'https://cdn.helpwave.de/screenshots/tasks_1.png'
  const size = 1024
@@ -18,7 +40,7 @@ const StartSection = () => {
  </Link>
 
  <h4 className={tw('font-sans text-2xl font-medium mt-2 text-gray-600')}>
- The first open-source team management platform for healthcare workers
+ {translation.title}
  </h4>
 
  <Image alt="Screenshots" src={screenshotURL} style={{ objectFit: 'contain' }} width={size} height={size} className={tx(`w-[${size}px] shadow-md hover:shadow-2xl transition-all duration-500 w-full rounded-md mt-8`)} />
@@ -27,7 +49,7 @@ const StartSection = () => {
  <Mouse className={tw('inline')} /> scroll
  </div>
  <div className={tw('mt-16 text-xl text-center')}>
- <p> <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> increases the productivity in your clinical team. Ditch your print-out ward list and coordinate your work and the work of your team in a modern kanban interface. <span className={tw('font-space font-bold')}>helpwave</span> <span className={tw('text-hw-primary-800')}>tasks</span> has been inspired by modern industry work flows and best practices from lean project management and applies them to the clinical environment.</p>
+ <p><MarkdownInterpreter text={translation.text}/></p>
  </div>
  </div>
  )

landing-page/package.json

@@ -18,20 +18,20 @@
  "@twind/preset-tailwind-forms": "1.1.2",
  "@twind/preset-typography": "1.0.7",
  "csstype": "3.1.3",
- "lucide-react": "0.358.0",
+ "lucide-react": "0.364.0",
  "next": "13.5.6",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-hot-toast": "2.4.1",
  "react-intersection-observer": "9.8.1",
- "vanilla-cookieconsent": "3.0.0"
+ "vanilla-cookieconsent": "3.0.1"
  },
  "devDependencies": {
- "@types/node": "20.11.28",
- "@types/react": "18.2.66",
- "@types/react-dom": "18.2.22",
- "@next/eslint-plugin-next": "14.1.3",
+ "@types/node": "20.12.4",
+ "@types/react": "18.2.74",
+ "@types/react-dom": "18.2.24",
+ "@next/eslint-plugin-next": "14.1.4",
  "@helpwave/eslint-config": "workspace:*",
- "typescript": "5.4.2"
+ "typescript": "5.4.4"
  }
 }

landing-page/pages/index.tsx

@@ -20,7 +20,7 @@ type HomePageTranslation = {
  helpwaveTasks: string
 }
 
-const defaultHomePageTranslation : Record<Languages, HomePageTranslation> = {
+const defaultHomePageTranslation: Record<Languages, HomePageTranslation> = {
  en: {
  checkOutFirstProduct: 'Check out our first product',
  checkOutFirstProductDescription: 'and how helpwave tasks increases productivity for our medical heroes',
@@ -46,20 +46,18 @@ const Home: NextPage = ({ overwriteTranslation }: PropsForTranslation<HomePageTr
  <PartnerSection/>
  </div>
  <Divider rotate={1}/>
- <div className={tw('desktop:w-7/12 desktop:mx-auto mobile:mx-8 relative z-[1] desktop:pb-8 mobile:pb-16')}>
+ <div className={tw('desktop:w-7/12 desktop:mx-auto mobile:mx-8')}>
  <StorySection/>
  </div>
- <div className={tw('w-screen parent bg-hw-primary-900 relative')}>
- <div className={tw('desktop:w-5/12 desktop:mx-auto mobile:mx-8 desktop:pt-24 mobile:pt-32 text-white')}>
- <ExpansionSection/>
- </div>
- <div className={tw('absolute z-[2] desktop:w-[620px] top-0 left-1/2 -translate-x-1/2 -translate-y-1/2')}>
+ <div className={tw('relative flex flex-col items-center')}>
+ <div className={tw('desktop:w-[620px] mx-20')}>
  <DescriptionWithAction
  // TODO translation
  title={`${translation.checkOutFirstProduct}...`}
  description={`...${translation.checkOutFirstProductDescription}`}
  trailing={(
- <div className={tw('flex flex-row items-center desktop:justify-end mobile:justify-center grow desktop:pl-2 mobile:pt-2')}>
+ <div
+ className={tw('flex flex-row items-center desktop:justify-end mobile:justify-center grow desktop:pl-2 mobile:pt-2')}>
  <Link
  href="product/tasks"
  className={tw('flex flex-row gap-x-4 whitespace-nowrap px-4 py-2 text-white bg-hw-primary-800 rounded-md')}
@@ -73,6 +71,10 @@ const Home: NextPage = ({ overwriteTranslation }: PropsForTranslation<HomePageTr
  descriptionClassName={tw('!text-gray-600')}
  />
  </div>
+ <div className={tw('absolute h-1/2 w-full top-1/2 bg-hw-primary-900 z-[-1] translate-y-[2px]')}></div>
+ </div>
+ <div className={tw('w-screen parent bg-hw-primary-900 text-white')}>
+ <ExpansionSection/>
  </div>
  <Footer/>
  </div>

landing-page/pages/team/index.tsx

@@ -8,7 +8,7 @@ const Team: NextPage = () => {
  return (
  <div className={tw('w-screen h-screen bg-white parent relative z-0 overflow-x-hidden')}>
  <Header />
- <div className={tw('desktop:w-5/12 desktop:mx-auto mobile:mx-8 relative z-[1]')}>
+ <div className={tw('max-w-[1200px] desktop:mx-auto mobile:mx-8 relative z-[1]')}>
  <TeamSection />
  </div>
  <Footer />