chore: heygermany customer project

2026-07-11 09:21:21 +02:00
commit 59b4a7a404
398 changed files with 38340 additions and 0 deletions
--- a/apps/website/components/jobs/results/Qualification.tsx
+++ b/apps/website/components/jobs/results/Qualification.tsx
@@ -0,0 +1,152 @@
+'use client'
+
+import { useI18n } from '@/context/i18n-provider'
+import { asI18n } from '@pikku/react'
+import { LanguageLevels } from '@heygermany/sdk'
+import {
+  Stack,
+  Title,
+  Text,
+  Box,
+  Paper,
+  Progress,
+  List,
+  ThemeIcon,
+  Flex,
+  rem,
+  useMantineTheme,
+} from '@pikku/mantine/core'
+import {
+  IconCircleCheck,
+  IconExclamationCircle,
+  IconClock,
+  IconInfoCircle,
+  IconCircle,
+} from '@tabler/icons-react'
+
+interface QualificationProps {
+  title: string
+  description: string
+  status: string
+  requirements: string[]
+  steps?: string[]
+  progress?: number
+  fillHeight?: boolean
+}
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'completed':
+      return 'green'
+    case 'required':
+      return 'red'
+    case 'in-progress':
+      return 'orange'
+    case 'optional':
+      return 'blue'
+    default:
+      return 'gray'
+  }
+}
+
+const getStatusIcon = (status: string) => {
+  const iconProps = { size: 28, color: getStatusColor(status) }
+  switch (status) {
+    case 'completed':
+      return <IconCircleCheck {...iconProps} />
+    case 'required':
+      return <IconExclamationCircle {...iconProps} />
+    case 'in-progress':
+      return <IconClock {...iconProps} />
+    case 'optional':
+      return <IconInfoCircle {...iconProps} />
+    default:
+      return <IconCircle {...iconProps} />
+  }
+}
+
+export const Qualification: React.FunctionComponent<QualificationProps> = ({
+  title,
+  description,
+  status,
+  requirements,
+  steps,
+  progress,
+  fillHeight = true,
+}) => {
+  const t = useI18n()
+  const theme = useMantineTheme()
+
+  function translateLevels(req: string): string {
+  for (const key of Object.keys(LanguageLevels)) {
+    req = req.replace(key, t(`enums.languagelevel.${key}`.toLowerCase() as any))
+  }
+  return req
+}
+
+  return (
+    <Paper flex={1} withBorder p="lg" radius="lg" h={fillHeight ? '100%' : undefined}>
+      <Stack flex={1} gap={0}>
+        <Flex align="center" gap="xs" mb={5}>
+          <ThemeIcon variant="transparent" color={getStatusColor(status)}>
+            {getStatusIcon(status)}
+          </ThemeIcon>
+          <Text size="xl">{asI18n(title)}</Text>
+        </Flex>
+
+        <Flex mb="md" gap="sm" align="center">
+          <Text component="span" fw="600" c={getStatusColor(status)}>
+            {t(`enums.documentstatus.${status}` as any)}
+          </Text>
+          {!isNaN(progress!) && (
+            <Progress.Root flex={1} h="md" radius="xl">
+              <Progress.Section value={progress!}>
+                <Progress.Label c="dimmed" fz="sm" fw={700}>
+                  {progress}%
+                </Progress.Label>
+              </Progress.Section>
+            </Progress.Root>
+          )}
+        </Flex>
+
+        <Text size="lg" c="dimmed" mb="md">
+          {asI18n(description)}
+        </Text>
+
+        {requirements && (
+          <Box mb="md">
+            <Text size="lg" fw={500} mb="xs">
+              {asI18n(`${t('jobs.qualification.requirements')}:`)}
+            </Text>
+            <List pl="md" size="md">
+              {requirements.map((req, reqIndex) => (
+                <List.Item key={reqIndex}>
+                  <Text c={`${theme.colors.gray[7]}`} fz="md" fw={300}>
+                    {asI18n(translateLevels(req))}
+                  </Text>
+                </List.Item>
+              ))}
+            </List>
+          </Box>
+        )}
+
+        {(steps?.length && steps.length > 0) ? (
+          <Box mb="md">
+            <Text component='h4' size="lg" fw={500} mb="xs">
+              {asI18n(`${t('jobs.qualification.nextsteps')}:`)}
+            </Text>
+            <List pl="md" type="ordered" size="md">
+              {steps.map((step, stepIndex) => (
+                <List.Item key={stepIndex}>
+                  <Text c={`${theme.colors.gray[7]}`} fz="md" fw={300}>
+                    {asI18n(translateLevels(step))}
+                  </Text>
+                </List.Item>
+              ))}
+            </List>
+          </Box>
+        ) : null}
+      </Stack>
+    </Paper>
+  )
+}