@salesforce/ui-bundle-template-app-react-sample-b2e 1.117.2

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/applications/ApplicationDetailsModal.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import { Button } from "../ui/button";
+import type { ApplicationSearchNode } from "../../api/applications/applicationSearchService";
+
+interface ApplicationDetailsModalProps {
+	application: ApplicationSearchNode;
+	isOpen: boolean;
+	onClose: () => void;
+	onSave: (applicationId: string, status: string) => Promise<void>;
+}
+
+export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = ({
+	application,
+	isOpen,
+	onClose,
+	onSave,
+}) => {
+	const status = application.Status__c?.value || "Unknown";
+	const [selectedStatus, setSelectedStatus] = useState(status);
+	const [isSaving, setIsSaving] = useState(false);
+
+	const isStatusEditable =
+		status.toLowerCase() !== "approved" && status.toLowerCase() !== "rejected";
+
+	const statusOptions = ["Submitted", "Background Check", "Under Review", "Approved", "Rejected"];
+
+	const handleSave = async () => {
+		if (!isStatusEditable) return;
+
+		setIsSaving(true);
+		try {
+			await onSave(application.Id, selectedStatus);
+			onClose();
+		} catch (error) {
+			console.error("Error saving status:", error);
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	if (!isOpen) return null;
+
+	const applicantName = application.User__r?.Name?.value || "Unknown";
+	const propertyName = application.Property__r?.Name?.value;
+	const propertyAddress = application.Property__r?.Address__c?.value || "";
+	const employment = application.Employment__c?.value;
+	const references = application.References__c?.value;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<div className="fixed inset-0 bg-black/50" onClick={onClose} />
+
+			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
+				<div className="flex items-center justify-between p-6 border-b border-gray-200">
+					<h2 className="text-xl font-semibold text-gray-900">Application Details</h2>
+					<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+						<X className="w-6 h-6" />
+					</button>
+				</div>
+
+				<div className="p-6 space-y-6">
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Applicant
+						</h3>
+						<p className="text-lg font-medium text-gray-900">{applicantName}</p>
+					</div>
+
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Property
+						</h3>
+						<p className="text-base text-gray-900">
+							{propertyName && <span className="font-medium">{propertyName}</span>}
+						</p>
+						<p className="text-sm text-gray-600">{propertyAddress}</p>
+					</div>
+
+					{employment && (
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Employment
+							</h3>
+							<p className="text-sm text-gray-700 whitespace-pre-wrap">{employment}</p>
+						</div>
+					)}
+
+					{references && (
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								References
+							</h3>
+							<p className="text-sm text-gray-700 whitespace-pre-wrap">{references}</p>
+						</div>
+					)}
+
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Status
+						</h3>
+						{isStatusEditable ? (
+							<select
+								value={selectedStatus}
+								onChange={(e) => setSelectedStatus(e.target.value)}
+								className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+							>
+								{statusOptions.map((s) => (
+									<option key={s} value={s}>
+										{s}
+									</option>
+								))}
+							</select>
+						) : (
+							<div className="flex items-center">
+								<span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md font-medium">
+									{status}
+								</span>
+								<span className="ml-3 text-sm text-gray-500">(Cannot be modified)</span>
+							</div>
+						)}
+					</div>
+				</div>
+
+				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
+					<Button variant="outline" onClick={onClose} disabled={isSaving}>
+						Close
+					</Button>
+					{isStatusEditable && (
+						<Button
+							onClick={handleSave}
+							disabled={isSaving || selectedStatus === status}
+							className="bg-purple-600 hover:bg-purple-700"
+						>
+							{isSaving ? "Saving..." : "Save Changes"}
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/dashboard/GlobalSearchBar.tsx

@@ -0,0 +1,101 @@
+import type { SearchableObjectConfig } from "../../lib/constants";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../ui/select";
+import { Search } from "lucide-react";
+
+type SearchableObjectApiName = SearchableObjectConfig["objectApiName"];
+
+export interface GlobalSearchBarProps {
+	searchableObjects: readonly SearchableObjectConfig[];
+	selectedObjectApiName: SearchableObjectApiName;
+	onSelectedObjectChange: (objectApiName: SearchableObjectApiName) => void;
+	searchQuery: string;
+	onSearchQueryChange: (value: string) => void;
+	onSearchSubmit: () => void;
+	onBrowseAll: () => void;
+	labelPlural: string;
+}
+
+/**
+ * Home page search: object dropdown + search input. Uses fallback labels from config.
+ */
+export function GlobalSearchBar({
+	searchableObjects,
+	selectedObjectApiName,
+	onSelectedObjectChange,
+	searchQuery,
+	onSearchQueryChange,
+	onSearchSubmit,
+	onBrowseAll,
+	labelPlural,
+}: GlobalSearchBarProps) {
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onSearchSubmit();
+		}
+	};
+
+	return (
+		<div className="flex flex-wrap gap-2 items-center mb-4">
+			<div
+				className="w-full max-w-xl bg-white rounded-full px-4 py-3 shadow-sm border border-gray-200 flex items-center gap-2"
+				role="search"
+				aria-label={`Search ${labelPlural}`}
+			>
+				<Select
+					value={selectedObjectApiName}
+					onValueChange={(v) => onSelectedObjectChange(v as SearchableObjectApiName)}
+				>
+					<SelectTrigger
+						className="border-0 bg-transparent shadow-none focus:ring-0 focus:ring-offset-0 min-w-[120px] py-0 h-auto font-medium text-gray-700"
+						aria-label="Search in"
+					>
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						{searchableObjects.map((obj) => (
+							<SelectItem key={obj.objectApiName} value={obj.objectApiName}>
+								{obj.fallbackLabelPlural ?? "Records"}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<span className="text-gray-300 shrink-0" aria-hidden="true">
+					|
+				</span>
+				<input
+					type="search"
+					placeholder={`Search ${labelPlural}`}
+					value={searchQuery}
+					onChange={(e) => onSearchQueryChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					className="flex-1 outline-none text-gray-600 bg-transparent min-w-0"
+					aria-label={`Search ${labelPlural}`}
+				/>
+				<button
+					type="button"
+					onClick={onSearchSubmit}
+					disabled={!searchQuery.trim()}
+					className="p-1 rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none shrink-0"
+					aria-label="Submit search"
+				>
+					<Search className="w-5 h-5 text-gray-500" aria-hidden="true" />
+				</button>
+			</div>
+			<button
+				type="button"
+				onClick={onBrowseAll}
+				className="px-4 py-3 text-sm font-medium text-[#372949] bg-white border border-gray-200 rounded-full shadow-sm hover:bg-gray-50 whitespace-nowrap"
+				aria-label={`Browse all ${labelPlural}`}
+			>
+				Browse all {labelPlural}
+			</button>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/dashboard/IssuesDonutChart.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
+import { Card } from "../ui/card";
+import { Skeleton } from "../ui/skeleton";
+import { MoreVertical } from "lucide-react";
+
+interface ChartData {
+	name: string;
+	value: number;
+	color: string;
+}
+
+interface IssuesDonutChartProps {
+	data: ChartData[];
+	loading?: boolean;
+}
+
+interface CustomTooltipProps {
+	active?: boolean;
+	payload?: Array<{ name?: string | number; value?: number }>;
+	total: number;
+}
+
+function CustomTooltip({ active, payload, total }: CustomTooltipProps) {
+	if (active && payload && payload.length && payload[0].value != null) {
+		const percentage = total > 0 ? Math.round((payload[0].value / total) * 100) : 0;
+		const name = payload[0].name != null ? String(payload[0].name) : "";
+		return (
+			<div className="bg-white p-3 border border-gray-200 rounded shadow-lg z-50">
+				<p className="text-sm font-semibold text-gray-800">{name}</p>
+				<p className="text-sm text-gray-600">
+					Count: <span className="font-medium">{payload[0].value}</span>
+				</p>
+				<p className="text-sm text-gray-600">
+					Percentage: <span className="font-medium">{percentage}%</span>
+				</p>
+			</div>
+		);
+	}
+	return null;
+}
+
+export const IssuesDonutChart: React.FC<IssuesDonutChartProps> = ({ data, loading }) => {
+	const total = data.reduce((sum, item) => sum + item.value, 0);
+	const maxValue = data.length > 0 ? Math.max(...data.map((item) => item.value)) : 0;
+	const mainPercentage = total > 0 ? Math.round((maxValue / total) * 100) : 0;
+
+	return (
+		<Card className="p-4 border-gray-200 shadow-sm flex flex-col relative">
+			{/* Three-dot menu */}
+			<button className="absolute top-4 right-4 p-1 hover:bg-gray-100 rounded-md transition-colors z-10">
+				<MoreVertical className="w-4 h-4 text-gray-400" />
+			</button>
+
+			<h3 className="text-sm font-medium text-primary-purple mb-2 uppercase tracking-wide">
+				Top Maintenance Issues
+			</h3>
+			{loading ? (
+				<>
+					<div className="flex items-center justify-center" style={{ height: 300 }}>
+						<div className="h-[220px] w-[220px] rounded-full border-[40px] border-muted animate-pulse" />
+					</div>
+					<div className="mt-6 grid grid-cols-2 gap-6">
+						{Array.from({ length: 5 }, (_, i) => (
+							<div key={i} className="flex items-center gap-2">
+								<Skeleton className="w-3 h-3 rounded-full" />
+								<Skeleton className="h-3 w-20" />
+							</div>
+						))}
+					</div>
+				</>
+			) : (
+				<>
+					<div className="relative flex items-center justify-center">
+						<ResponsiveContainer width="100%" height={300}>
+							<PieChart>
+								<Pie
+									data={data}
+									cx="50%"
+									cy="50%"
+									innerRadius={70}
+									outerRadius={110}
+									paddingAngle={2}
+									dataKey="value"
+								>
+									{data.map((entry, index) => (
+										<Cell key={`cell-${index}`} fill={entry.color} />
+									))}
+								</Pie>
+								<Tooltip
+									content={(props) => (
+										<CustomTooltip
+											active={props.active}
+											payload={props.payload as CustomTooltipProps["payload"]}
+											total={total}
+										/>
+									)}
+									wrapperStyle={{ zIndex: 1000 }}
+								/>
+							</PieChart>
+						</ResponsiveContainer>
+						{/* Center text */}
+						<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+							<div className="text-center">
+								<div className="text-5xl font-bold text-primary-purple">{mainPercentage}%</div>
+							</div>
+						</div>
+					</div>
+					{/* Legend */}
+					<div className="mt-6 grid grid-cols-2 gap-3">
+						{data.map((item, index) => (
+							<div key={index} className="flex items-center gap-2">
+								<div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }}></div>
+								<span className="text-sm text-gray-700">{item.name}</span>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+		</Card>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/dashboard/MaintenanceTable.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { useNavigate } from "react-router";
+import { PATHS } from "../../lib/routeConfig";
+import { Card } from "../ui/card";
+import { Button } from "../ui/button";
+import { Skeleton } from "../ui/skeleton";
+import type { DashboardMaintenanceNode } from "../../api/dashboard/dashboard";
+import PlumbingIcon from "../../assets/icons/plumbing.svg";
+import HVACIcon from "../../assets/icons/hvac.svg";
+import ElectricalIcon from "../../assets/icons/electrical.svg";
+import AppliancesIcon from "../../assets/icons/appliances.svg";
+import PestIcon from "../../assets/icons/pest.svg";
+
+interface MaintenanceTableProps {
+	requests: NonNullable<DashboardMaintenanceNode>[];
+	loading?: boolean;
+	onView?: (id: string) => void;
+}
+
+const issueIcons: Record<string, string> = {
+	Plumbing: PlumbingIcon,
+	HVAC: HVACIcon,
+	Electrical: ElectricalIcon,
+	Appliance: AppliancesIcon,
+	Pest: PestIcon,
+};
+
+const issueIconColors: Record<string, string> = {
+	Plumbing: "bg-purple-100",
+	HVAC: "bg-purple-100",
+	Electrical: "bg-purple-100",
+	Appliance: "bg-purple-100",
+	Pest: "bg-purple-100",
+};
+
+export const MaintenanceTable: React.FC<MaintenanceTableProps> = ({ requests, loading }) => {
+	const navigate = useNavigate();
+
+	const handleSeeAll = () => {
+		navigate(PATHS.MAINTENANCE_REQUESTS);
+	};
+
+	return (
+		<Card className="p-6 border-gray-200 shadow-sm">
+			<div className="flex items-center justify-between mb-6">
+				<h2 className="text-lg font-semibold text-primary-purple uppercase tracking-wide">
+					Maintenance Requests
+				</h2>
+				<Button variant="link" onClick={handleSeeAll} className="cursor-pointer">
+					See All
+				</Button>
+			</div>
+			<div className="space-y-4">
+				{loading ? (
+					Array.from({ length: 5 }, (_, i) => (
+						<div key={i} className="flex items-center p-4 bg-gray-50 rounded-lg">
+							<Skeleton className="w-12 h-12 rounded-lg shrink-0" />
+							<div className="ml-4 w-64 shrink-0 space-y-2">
+								<Skeleton className="h-4 w-40" />
+								<Skeleton className="h-3 w-32" />
+							</div>
+							<div className="ml-4 w-80 shrink-0">
+								<Skeleton className="h-3 w-56" />
+							</div>
+							<div className="ml-4 w-48 shrink-0 flex items-center gap-2">
+								<Skeleton className="w-8 h-8 rounded-full shrink-0" />
+								<Skeleton className="h-4 w-24" />
+							</div>
+						</div>
+					))
+				) : requests.length === 0 ? (
+					<div className="text-center py-8 text-gray-500">No maintenance requests</div>
+				) : (
+					requests.slice(0, 5).map((request) => {
+						const issueType = request.Type__c?.value || "General";
+						const propertyAddress = request.Property__r?.Address__c?.value || "Unknown Address";
+						const description = request.Description__c?.value || "";
+						const tenantName = request.User__r?.Name?.value || "Unknown";
+
+						return (
+							<div
+								key={request.Id}
+								className="flex items-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+							>
+								<div
+									className={`flex items-center justify-center w-12 h-12 ${issueIconColors[issueType] || "bg-purple-100"} rounded-lg flex-shrink-0`}
+								>
+									{issueIcons[issueType] ? (
+										<img src={issueIcons[issueType]} alt={issueType} className="w-6 h-6" />
+									) : (
+										<span className="text-2xl">🔧</span>
+									)}
+								</div>
+
+								<div className="ml-4 w-64 flex-shrink-0">
+									<div className="flex items-center gap-2 mb-1">
+										<h3 className="font-semibold text-gray-900">{issueType}</h3>
+										<span className="text-gray-500">|</span>
+										<span className="text-sm text-gray-600 truncate">
+											{propertyAddress.split(",")[0]}
+										</span>
+									</div>
+									<p className="text-sm text-gray-500">
+										Request ID: {request.Id.substring(0, 8)}...
+									</p>
+								</div>
+
+								<div className="ml-4 w-80 flex-shrink-0">
+									<p className="text-sm text-gray-700 truncate">
+										{description || "No description"}
+									</p>
+								</div>
+
+								<div className="ml-4 w-48 flex-shrink-0 flex items-center gap-2">
+									<div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
+										<span className="text-sm font-medium text-gray-700">
+											{tenantName.charAt(0) || "?"}
+										</span>
+									</div>
+									<span className="text-sm text-gray-700 font-medium truncate">{tenantName}</span>
+								</div>
+							</div>
+						);
+					})
+				)}
+			</div>
+		</Card>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/dashboard/StatCard.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Card } from "../ui/card";
+import { Skeleton } from "../ui/skeleton";
+import upgraphIcon from "../../assets/icons/upgraph.svg";
+import downgraphIcon from "../../assets/icons/downgraph.svg";
+import { MoreVertical } from "lucide-react";
+
+interface StatCardProps {
+	title: string;
+	value?: number | string;
+	trend?: {
+		value: number;
+		isPositive: boolean;
+	};
+	subtitle?: string;
+	loading?: boolean;
+	onClick?: () => void;
+}
+
+export const StatCard: React.FC<StatCardProps> = ({
+	title,
+	value,
+	trend,
+	subtitle,
+	loading,
+	onClick,
+}) => {
+	return (
+		<Card
+			className={`p-4 border-gray-200 shadow-sm relative ${onClick ? "cursor-pointer hover:shadow-lg transition-shadow" : ""}`}
+			onClick={onClick}
+		>
+			{/* Three-dot menu */}
+			<button className="absolute top-4 right-4 p-1 hover:bg-gray-100 rounded-md transition-colors">
+				<MoreVertical className="w-4 h-4 text-gray-400" />
+			</button>
+
+			<div className="space-y-1">
+				<p className="text-sm font-medium text-gray-600 uppercase tracking-wide">{title}</p>
+				{loading ? (
+					<>
+						<div className="flex items-baseline gap-3">
+							<Skeleton className="h-9 w-11" />
+							<Skeleton className="h-6 w-14 rounded-full" />
+						</div>
+						<Skeleton className="h-5 w-30 mt-2" />
+					</>
+				) : (
+					<>
+						<div className="flex items-baseline gap-3">
+							<p className="text-4xl font-bold text-primary-purple">{value}</p>
+							{trend && (
+								<span
+									className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-sm font-medium ${
+										trend.isPositive ? "bg-cyan-100 text-cyan-800" : "bg-pink-100 text-pink-800"
+									}`}
+								>
+									<img
+										src={trend.isPositive ? upgraphIcon : downgraphIcon}
+										alt={trend.isPositive ? "Up" : "Down"}
+										className="w-4 h-4"
+									/>
+									{Math.abs(trend.value)}%
+								</span>
+							)}
+						</div>
+						{subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+					</>
+				)}
+			</div>
+		</Card>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/layout/FilterRow.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils";
+
+interface FilterRowProps extends React.ComponentProps<"div"> {
+	ariaLabel?: string;
+}
+
+export function FilterRow({
+	className,
+	ariaLabel = "Filters",
+	children,
+	...props
+}: FilterRowProps) {
+	return (
+		<div
+			className={cn("bg-white rounded-lg shadow-sm border border-gray-200 p-4 pb-2", className)}
+			role="region"
+			aria-label={ariaLabel}
+			{...props}
+		>
+			<div className="flex flex-wrap items-end gap-x-8 gap-y-4">{children}</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/layout/PageContainer.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+interface PageContainerProps {
+	children: ReactNode;
+}
+
+export function PageContainer({ children }: PageContainerProps) {
+	return (
+		<div className="min-h-screen bg-gray-50 p-4 md:p-8">
+			<div className="max-w-7xl mx-auto space-y-6">{children}</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/layout/PageHeader.tsx

@@ -0,0 +1,17 @@
+interface PageHeaderProps {
+	title: string;
+	description: string;
+}
+
+/**
+ * Page title and optional description. Uses a consistent wrapper (max-w-7xl mx-auto px-8 pt-8)
+ * so the header aligns with list/content on all pages.
+ */
+export function PageHeader({ title, description }: PageHeaderProps) {
+	return (
+		<div>
+			<h1 className="text-2xl font-bold text-gray-900">{title}</h1>
+			{description !== "" && <p className="text-gray-800 mt-1">{description}</p>}
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/layout/TopBar.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react";
+import { ChevronDown, Menu } from "lucide-react";
+import zenLogo from "../../assets/icons/zen-logo.svg";
+import { getUserInfo } from "../../api/dashboard/dashboard";
+
+interface TopBarProps {
+	onMenuClick?: () => void;
+}
+
+export const TopBar: React.FC<TopBarProps> = ({ onMenuClick }) => {
+	const [userName, setUserName] = useState<string>("User");
+
+	useEffect(() => {
+		const loadUserInfo = async () => {
+			const userInfo = await getUserInfo();
+			if (userInfo) {
+				setUserName(userInfo.name);
+			}
+		};
+		loadUserInfo();
+	}, []);
+	return (
+		<div className="bg-[#372949] text-white h-16 flex items-center justify-between px-6">
+			{/* Left section - Logo and Menu */}
+			<div className="flex items-center gap-4">
+				<button
+					onClick={onMenuClick}
+					className="p-2 hover:bg-purple-700 rounded-md transition-colors md:hidden"
+					aria-label="Toggle menu"
+				>
+					<Menu className="w-6 h-6" />
+				</button>
+				<div className="flex items-center gap-2">
+					<img src={zenLogo} alt="Zenlease Logo" className="w-8 h-8" />
+					<span className="text-xl tracking-wide">
+						<span className="font-light">ZEN</span>
+						<span className="font-semibold">LEASE</span>
+					</span>
+				</div>
+			</div>
+
+			{/* Right section - Profile */}
+			<div className="flex items-center gap-4">
+				{/* User Profile */}
+				<button className="flex items-center gap-2 px-3 py-2 hover:bg-purple-700 rounded-md transition-colors">
+					<div className="w-8 h-8 bg-purple-300 rounded-full flex items-center justify-center text-purple-900 font-semibold">
+						{userName.charAt(0).toUpperCase()}
+					</div>
+					<span className="hidden md:inline font-medium">{userName.toUpperCase()}</span>
+					<ChevronDown className="w-4 h-4 hidden md:inline" />
+				</button>
+			</div>
+		</div>
+	);
+};