refactor(member): update member status stat to dynamically display capitalized user role

app/(app)/member/[id]/MemberProfileCard.tsx

@@ -5,7 +5,12 @@
 
 "use client";
 
-import { getFullName, getInitials, formatTimeAgo } from "@/utils/user";
+import {
+  getFullName,
+  getInitials,
+  formatTimeAgo,
+  capitalize,
+} from "@/utils/user";
 import { Mail, Clock, ShieldCheck } from "lucide-react";
 import { UserListItem } from "@/types/user";
 
@@ -36,7 +41,7 @@ export default function MemberProfileCard({ member }: MemberProfileCardProps) {
     },
     {
       label: "Account Status",
-      value: "Active - Member",
+      value: `Active - ${capitalize(member.role)}`,
       icon: ShieldCheck,
       color: "text-emerald-400 bg-emerald-500/10 border-emerald-500/20",
     },

app/(app)/member/list/MemberItem.tsx

@@ -10,6 +10,7 @@ import {
   getInitials,
   getStatusColor,
   formatTimeAgo,
+  capitalize,
 } from "@/utils/user";
 import { Mail } from "lucide-react";
 import { UserListItem } from "@/types/user";
@@ -61,7 +62,7 @@ export default function MemberItem({ member }: MemberItemProps) {
               {getFullName(member.firstName, member.lastName)}
             </h3>
             <span className="text-[10px] px-2 py-0.5 rounded-md font-semibold border border-border/60 bg-card/60 text-foreground-muted">
-              Member
+              {capitalize(member.role)}
             </span>
           </div>
 

services/user.service.ts

@@ -16,7 +16,7 @@ export class UserService {
    *
    * @async
    * @param {string} userId - The unique identifier of the user.
-   * @returns {Promise<{ id: string; firstName: string; lastName: string; email: string; color: string; isOnline: boolean; lastLogin: Date } | null>} The user profile data or null if not found.
+   * @returns {Promise<{ id: string; firstName: string; lastName: string; email: string; role: string; color: string; isOnline: boolean; lastLogin: Date } | null>} The user profile data or null if not found.
    */
   static async findProfileById(userId: string) {
     const [user] = await db
@@ -25,6 +25,7 @@ export class UserService {
         firstName: usersTable.firstName,
         lastName: usersTable.lastName,
         email: usersTable.email,
+        role: usersTable.role,
         color: usersTable.color,
         isOnline: usersTable.isOnline,
         lastLogin: usersTable.lastLogin,
@@ -39,7 +40,7 @@ export class UserService {
    * Retrieves a list of all users sorted by their last login date in descending order, placing null values last.
    *
    * @async
-   * @returns {Promise<Array<{ id: string; firstName: string; lastName: string; email: string; color: string; lastLogin: Date; isOnline: boolean }>>} An array of user list items.
+   * @returns {Promise<Array<{ id: string; firstName: string; lastName: string; email: string; role: string; color: string; lastLogin: Date; isOnline: boolean }>>} An array of user list items.
    */
   static async findAllUsers() {
     return await db
@@ -48,6 +49,7 @@ export class UserService {
         firstName: usersTable.firstName,
         lastName: usersTable.lastName,
         email: usersTable.email,
+        role: usersTable.role,
         color: usersTable.color,
         lastLogin: usersTable.lastLogin,
         isOnline: usersTable.isOnline,

utils/user.ts

@@ -3,6 +3,17 @@
  * @description Utility functions for user formatting, initials generation, and name capitalization.
  */
 
+/**
+ * Capitalizes the first letter of a given string.
+ *
+ * @param {string} [str] - The string to capitalize.
+ * @returns {string} The capitalized string or an empty string if undefined/empty.
+ */
+export function capitalize(str?: string): string {
+  if (!str) return "";
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+
 /**
  * Generates the full name with properly capitalized first and last names.
  *
@@ -11,10 +22,9 @@
  * @returns {string} The formatted full name.
  */
 export function getFullName(firstName?: string, lastName?: string): string {
-  const format = (str?: string) =>
-    str ? str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() : "";
-
-  return `${format(firstName)} ${format(lastName)}`.trim();
+  const formattedFirst = capitalize(firstName);
+  const formattedLast = capitalize(lastName);
+  return `${formattedFirst} ${formattedLast}`.trim();
 }
 
 /**