+
{data.map((props, i) => (
@@ -151,9 +151,11 @@ export default function AppRouter() {
- {pages}
+
+ {pages}
+
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 46832e76228..e4e0b983368 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -106,6 +106,16 @@ export const formatName = (user: { first_name: string; last_name: string }) => {
return `${user.first_name} ${user.last_name}`;
};
+export const formatDisplayName = (user: {
+ first_name: string;
+ last_name: string;
+ username: string;
+}) => {
+ return user.first_name && user.last_name
+ ? `${user.first_name} ${user.last_name}`
+ : user.first_name || user.username || "User";
+};
+
export const relativeTime = (time?: DateLike) => {
return `${dayjs(time).fromNow()}`;
};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000000..bd0c391ddd1
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/style/index.css b/src/style/index.css
index 254bf4e9b6e..3eb79892e85 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -1305,4 +1305,10 @@ input[type="number"] {
font-weight: 700;
color: #2856ff;
font-size: 1rem;
+}
+
+@layer base {
+ :root {
+ --radius: 0.5rem;
+ }
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 31aa43878dc..cff9d035ff2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,7 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const colors = require("tailwindcss/colors");
-const defaultTheme = require("tailwindcss/defaultTheme");
-const gray = {
+const secondary = {
50: "#F9FAFB",
100: "#FBFAFC",
200: "#F7F5FA",
@@ -18,12 +17,8 @@ const gray = {
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
+ darkMode: ["class"],
theme: {
- screens: {
- vs: "348px",
- ...defaultTheme.screens,
- "3xl": "1920px",
- },
extend: {
fontFamily: {
sans: ["Inter", "sans-serif"],
@@ -37,18 +32,18 @@ module.exports = {
200: "#bcf0da",
300: "#84e1bc",
400: "#31c48d",
- DEFAULT: "#0d9f6e",
500: "#0d9f6e",
600: "#057a55",
700: "#046c4e",
800: "#03543F",
900: "#014737",
+ DEFAULT: "#0d9f6e",
},
- secondary: gray,
+ secondary: secondary,
danger: colors.red,
warning: colors.amber,
alert: colors.violet,
- gray,
+ gray: colors.gray,
patient: {
comfort: {
DEFAULT: colors.slate[200],
@@ -67,8 +62,8 @@ module.exports = {
fore: colors.red[100],
},
unknown: {
- DEFAULT: gray[400],
- fore: gray[800],
+ DEFAULT: secondary[400],
+ fore: secondary[800],
},
activelydying: {
DEFAULT: colors.red[800],
@@ -76,14 +71,16 @@ module.exports = {
},
},
},
- padding: {
- "1/5": "20%",
- },
scale: {
25: "0.25",
175: "1.75",
200: "2",
},
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
},
},
content: ["./src/**/*.{html,md,js,jsx,ts,tsx,res}", "./index.html"],
@@ -91,5 +88,6 @@ module.exports = {
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
+ require("tailwindcss-animate"),
],
};
diff --git a/tsconfig.json b/tsconfig.json
index 61e8476b152..531d6f800e1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,9 @@
"noEmit": true,
"jsx": "react-jsx",
"types": ["vite/client", "vite-plugin-pwa/client"],
+ "baseUrl": ".",
"paths": {
+ "@/*": ["./src/*"],
"@careConfig": ["./care.config.ts"]
}
},
diff --git a/vite.config.mts b/vite.config.mts
index 39ff4b4e99e..acb0cdf727b 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -86,6 +86,7 @@ export default {
],
resolve: {
alias: {
+ "@": path.resolve(__dirname, "./src"),
"@careConfig": path.resolve(__dirname, "./care.config.ts"),
},
},
diff --git a/src/Components/Common/Avatar.tsx b/src/Components/Common/Avatar.tsx
new file mode 100644
index 00000000000..244163f963a
--- /dev/null
+++ b/src/Components/Common/Avatar.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+
+const colors: [string, boolean][] = [
+ ["#ff4040", false],
+ ["#7f2020", false],
+ ["#cc5c33", false],
+ ["#734939", false],
+ ["#bf9c8f", false],
+ ["#995200", false],
+ ["#4c2900", false],
+ ["#f2a200", false],
+ ["#ffd580", true],
+ ["#332b1a", false],
+ ["#4c3d00", false],
+ ["#ffee00", true],
+ ["#b0b386", false],
+ ["#64664d", false],
+ ["#6c8020", false],
+ ["#c3d96c", true],
+ ["#143300", false],
+ ["#19bf00", false],
+ ["#53a669", false],
+ ["#bfffd9", true],
+ ["#40ffbf", true],
+ ["#1a332e", false],
+ ["#00b3a7", false],
+ ["#165955", false],
+ ["#00b8e6", false],
+ ["#69818c", false],
+ ["#005ce6", false],
+ ["#6086bf", false],
+ ["#000e66", false],
+ ["#202440", false],
+ ["#393973", false],
+ ["#4700b3", false],
+ ["#2b0d33", false],
+ ["#aa86b3", false],
+ ["#ee00ff", false],
+ ["#bf60b9", false],
+ ["#4d3949", false],
+ ["#ff00aa", false],
+ ["#7f0044", false],
+ ["#f20061", false],
+ ["#330007", false],
+ ["#d96c7b", false],
+];
+
+const stringToInt = (name: string): number => {
+ const aux = (sum: number, remains: string): number => {
+ if (remains === "") return sum;
+ const firstCharacter = remains.slice(0, 1);
+ const newRemains = remains.slice(1);
+ return aux(sum + firstCharacter.charCodeAt(0), newRemains);
+ };
+
+ return Math.floor(aux(0, name));
+};
+
+const toColor = (name: string): [string, string] => {
+ const index = stringToInt(name) % 42;
+ const [backgroundColor, blackText] = colors[index];
+ return [backgroundColor, blackText ? "#000000" : "#FFFFFF"];
+};
+
+const initials = (name: string): string => {
+ return name
+ .split(" ")
+ .slice(0, 2)
+ .map((word) => word.slice(0, 1))
+ .join("")
+ .toUpperCase(); // Ensure initials are uppercase
+};
+
+interface AvatarProps {
+ colors?: [string, string];
+ name: string;
+ className?: string;
+}
+
+const Avatar: React.FC