feat: implement dynamic mobile header with centered page title and adaptive layout

app/(backend)/users/components/UserMobileCard/index.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { MoreVertical, Mail, Shield, Calendar } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface UserMobileCardProps {
+    name: string;
+    email: string;
+    role: string;
+    joinedAt?: string;
+    status: 'active' | 'inactive';
+}
+
+export const UserMobileCard: React.FC<UserMobileCardProps> = ({ name, email, role, joinedAt, status }) => {
+
+    return (
+        <div className="bg-card border border-border rounded-xl p-4 shadow-sm md:hidden active:scale-[0.99] transition-all">
+            {/* Header section */}
+            <div className="flex items-start justify-between">
+                <div className="flex items-center gap-3">
+                    {/* Avatar will be here */}
+                    <div className="size-11 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
+                        <span className="text-primary font-bold text-sm">
+                            {name.split(" ").map(n => n[0]).join("")}
+                        </span>
+                    </div>
+                    <div className="flex flex-col">
+                        <span className="font-semibold text-foreground leading-none">{name}</span>
+                        <span className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                            <Mail className="size-3" />
+                            {email}
+                        </span>
+                    </div>
+                </div>
+
+                <Badge
+                    variant={status === "active" ? "default" : "secondary"}
+                    className="text-[10px] px-2 py-0 h-5"
+                >
+                    {status}
+                </Badge>
+            </div>
+
+            {/* Footer section: role and options */}
+            <div className="flex items-center justify-between mt-5 pt-3 border-t border-border/50">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Shield className="size-3 text-primary/70" />
+                    <span>Role: <b className="text-foreground font-medium">{role}</b></span>
+                </div>
+                <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
+                    <Calendar className="size-3" />
+                    <span>Joined: {joinedAt}</span>
+                </div>
+                <Button variant="ghost" size="icon-xs" className="text-muted-foreground">
+                    <MoreVertical className="size-4" />
+                </Button>
+            </div>
+        </div>
+    )
+
+}