update the protal dashboard

apps/portal/src/app/components/ui.tsx

@@ -0,0 +1,59 @@
+import { Badge, Box, useMantineTheme } from '@mantine/core';
+import { APPLICATION_STATUS_COLORS } from '../features/licenses/constants';
+import type { ApplicationStatus } from '../features/licenses/types/license.types';
+import { useLicenseLabels } from '../features/licenses/hooks/useLicenseLabels';
+
+export function StatusPill({ status }: { status: ApplicationStatus }) {
+  const { applicationStatus } = useLicenseLabels();
+  const color = APPLICATION_STATUS_COLORS[status];
+  return (
+    <Badge
+      variant="light"
+      color={color}
+      radius="sm"
+      tt="none"
+      fw={600}
+      leftSection={
+        <Box
+          w={6}
+          h={6}
+          style={{
+            borderRadius: '50%',
+            background: `var(--mantine-color-${color}-filled)`,
+          }}
+        />
+      }
+    >
+      {applicationStatus(status)}
+    </Badge>
+  );
+}
+
+export function BrandAvatar({
+  initials = 'AB',
+  size = 38,
+}: {
+  initials?: string;
+  size?: number;
+}) {
+  const theme = useMantineTheme();
+  return (
+    <Box
+      w={size}
+      h={size}
+      style={{
+        borderRadius: '50%',
+        background: theme.other.heroGradient as string,
+        color: '#fff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: size * 0.36,
+        fontWeight: 700,
+        flexShrink: 0,
+      }}
+    >
+      {initials}
+    </Box>
+  );
+}