style: redesign stepper and clinical dashboard tabs into premium theme-aware capsules [skip render]

Author: ewceniza9009

emr-client/src/app/dashboard/patients/[id]/page.tsx

@@ -224,41 +224,56 @@ export default function PatientDetailPage() {
 
         {/* Center/Right Column: High-Density Clinical Tabs */}
         <div className="lg:col-span-3 space-y-4">
-          <div className="flex items-center gap-1 p-1 bg-[var(--input-bg)] border border-[var(--card-border)] rounded-xl w-fit flex-wrap">
+          <div className="flex items-center gap-0.5 p-1 bg-slate-200/50 dark:bg-neutral-900/60 backdrop-blur-md rounded-full border border-slate-300/40 dark:border-neutral-800/40 shadow-[inset_0_1px_3px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.5)] w-fit flex-wrap">
             <button
               onClick={() => setActiveTab("snapshot")}
-              className={`px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2 active:scale-95
-                           ${activeTab === "snapshot" ? "bg-[var(--primary)] text-white shadow-lg" : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"}`}
+              className={`relative px-4 py-1.5 rounded-full text-[9px] font-extrabold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 group/tab border border-transparent active:scale-95
+                           ${activeTab === "snapshot" 
+                             ? "bg-white dark:bg-white/10 text-[var(--primary)] shadow-[0_2px_8px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] border-slate-200/50 dark:border-white/5" 
+                             : "text-slate-500 hover:text-slate-900 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-white/40 dark:hover:bg-white/[0.02]"}`}
             >
-              <Activity className="w-3.5 h-3.5" /> Clinical Snapshot
+              <Activity className={`w-3.5 h-3.5 transition-colors ${activeTab === "snapshot" ? "text-[var(--primary)]" : "text-slate-400 dark:text-neutral-500 group-hover/tab:text-slate-700 dark:group-hover/tab:text-neutral-300"}`} />
+              <span>Clinical Snapshot</span>
             </button>
             <button
               onClick={() => setActiveTab("history")}
-              className={`px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2 active:scale-95
-                           ${activeTab === "history" ? "bg-[var(--primary)] text-white shadow-lg" : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"}`}
+              className={`relative px-4 py-1.5 rounded-full text-[9px] font-extrabold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 group/tab border border-transparent active:scale-95
+                           ${activeTab === "history" 
+                             ? "bg-white dark:bg-white/10 text-[var(--primary)] shadow-[0_2px_8px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] border-slate-200/50 dark:border-white/5" 
+                             : "text-slate-500 hover:text-slate-900 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-white/40 dark:hover:bg-white/[0.02]"}`}
             >
-              <History className="w-3.5 h-3.5" /> Historical Activity
+              <History className={`w-3.5 h-3.5 transition-colors ${activeTab === "history" ? "text-[var(--primary)]" : "text-slate-400 dark:text-neutral-500 group-hover/tab:text-slate-700 dark:group-hover/tab:text-neutral-300"}`} />
+              <span>Historical Activity</span>
             </button>
             <button
               onClick={() => setActiveTab("activity")}
-              className={`px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2 active:scale-95
-                           ${activeTab === "activity" ? "bg-[var(--primary)] text-white shadow-lg" : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"}`}
+              className={`relative px-4 py-1.5 rounded-full text-[9px] font-extrabold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 group/tab border border-transparent active:scale-95
+                           ${activeTab === "activity" 
+                             ? "bg-white dark:bg-white/10 text-[var(--primary)] shadow-[0_2px_8px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] border-slate-200/50 dark:border-white/5" 
+                             : "text-slate-500 hover:text-slate-900 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-white/40 dark:hover:bg-white/[0.02]"}`}
             >
-              <Calendar className="w-3.5 h-3.5" /> Visit Schedule
+              <Calendar className={`w-3.5 h-3.5 transition-colors ${activeTab === "activity" ? "text-[var(--primary)]" : "text-slate-400 dark:text-neutral-500 group-hover/tab:text-slate-700 dark:group-hover/tab:text-neutral-300"}`} />
+              <span>Visit Schedule</span>
             </button>
             <button
               onClick={() => setActiveTab("logistics")}
-              className={`px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2 active:scale-95
-                           ${activeTab === "logistics" ? "bg-[var(--primary)] text-white shadow-lg" : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"}`}
+              className={`relative px-4 py-1.5 rounded-full text-[9px] font-extrabold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 group/tab border border-transparent active:scale-95
+                           ${activeTab === "logistics" 
+                             ? "bg-white dark:bg-white/10 text-[var(--primary)] shadow-[0_2px_8px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] border-slate-200/50 dark:border-white/5" 
+                             : "text-slate-500 hover:text-slate-900 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-white/40 dark:hover:bg-white/[0.02]"}`}
             >
-              <Truck className="w-3.5 h-3.5" /> Logistics & Fleet
+              <Truck className={`w-3.5 h-3.5 transition-colors ${activeTab === "logistics" ? "text-[var(--primary)]" : "text-slate-400 dark:text-neutral-500 group-hover/tab:text-slate-700 dark:group-hover/tab:text-neutral-300"}`} />
+              <span>Logistics & Fleet</span>
             </button>
             <button
               onClick={() => setActiveTab("coordination")}
-              className={`px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2 active:scale-95
-                           ${activeTab === "coordination" ? "bg-[var(--primary)] text-white shadow-lg" : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"}`}
+              className={`relative px-4 py-1.5 rounded-full text-[9px] font-extrabold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 group/tab border border-transparent active:scale-95
+                           ${activeTab === "coordination" 
+                             ? "bg-white dark:bg-white/10 text-[var(--primary)] shadow-[0_2px_8px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] border-slate-200/50 dark:border-white/5" 
+                             : "text-slate-500 hover:text-slate-900 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-white/40 dark:hover:bg-white/[0.02]"}`}
             >
-              <CheckCircle2 className="w-3.5 h-3.5" /> Coordination & Records
+              <CheckCircle2 className={`w-3.5 h-3.5 transition-colors ${activeTab === "coordination" ? "text-[var(--primary)]" : "text-slate-400 dark:text-neutral-500 group-hover/tab:text-slate-700 dark:group-hover/tab:text-neutral-300"}`} />
+              <span>Coordination & Records</span>
             </button>
           </div>
 

emr-client/src/components/CustomDatePicker.tsx

@@ -11,6 +11,7 @@ interface Props {
   required?: boolean;
   disabled?: boolean;
   className?: string;
+  align?: "left" | "right";
 }
 
 export default function CustomDatePicker({
@@ -20,6 +21,7 @@ export default function CustomDatePicker({
   required,
   disabled,
   className = "",
+  align = "left",
 }: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -161,10 +163,10 @@ export default function CustomDatePicker({
   return (
     <div className={`relative ${className}`} ref={containerRef}>
       <div className={`relative ${disabled ? "opacity-50 pointer-events-none" : ""}`}>
-        <Calendar className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--primary)] opacity-40 pointer-events-none" />
+        <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--primary)] opacity-40 pointer-events-none" />
         <input
           type="text"
-          className="w-full bg-[var(--input-bg)] border border-[var(--card-border)] rounded-xl pl-11 pr-4 py-3 text-[11px] font-bold text-[var(--text-primary)] outline-none focus:border-[var(--primary)]/50 transition-all placeholder:text-[var(--text-muted)] placeholder:opacity-50 min-h-[40px] shadow-inner"
+          className="w-full bg-[var(--input-bg)] border border-[var(--card-border)] rounded-xl pl-9 pr-2 py-3 text-[11px] font-bold text-[var(--text-primary)] outline-none focus:border-[var(--primary)]/50 transition-all placeholder:text-[var(--text-muted)] placeholder:opacity-50 min-h-[40px] shadow-inner"
           value={inputValue}
           placeholder={placeholder}
           onClick={() => setIsOpen(true)}
@@ -181,7 +183,9 @@ export default function CustomDatePicker({
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: dropdownPosition === "top" ? 8 : -8, scale: 0.96 }}
             transition={{ duration: 0.15 }}
-            className={`absolute ${dropdownPosition === "top" ? "bottom-full mb-2" : "top-full mt-2"} left-0 right-0 md:w-80 md:right-auto z-[999] bg-[var(--card-bg)] border border-[var(--card-border)] rounded-2xl p-4 shadow-[0_10px_30px_rgba(0,0,0,0.15)] dark:shadow-[0_10px_30px_rgba(0,0,0,0.6)] select-none`}
+            className={`absolute ${dropdownPosition === "top" ? "bottom-full mb-2" : "top-full mt-2"} ${
+              align === "right" ? "right-0" : "left-0"
+            } w-[280px] sm:w-80 z-[999] bg-[var(--card-bg)] border border-[var(--card-border)] rounded-2xl p-4 shadow-[0_10px_30px_rgba(0,0,0,0.15)] dark:shadow-[0_10px_30px_rgba(0,0,0,0.6)] select-none`}
           >
             <div className="flex items-center justify-between mb-4">
               <button

emr-client/src/components/EnrollmentDrawer/components/DrawerHeader.tsx

@@ -35,7 +35,7 @@ export default function DrawerHeader({ state, lead, onClose }: Props) {
 
       {/* Progress Stepper Navigation */}
       <div className="flex-1 flex justify-center px-4">
-        <div className="flex bg-[var(--input-bg)]/50 rounded-xl p-1 border border-[var(--card-border)] backdrop-blur-sm shadow-inner gap-1">
+        <div className="flex bg-slate-200/50 dark:bg-neutral-900/60 backdrop-blur-md rounded-full p-1 border border-slate-300/40 dark:border-neutral-800/40 shadow-[inset_0_1px_3px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.5)] gap-0.5">
           {(["OUTREACH", "ADMIN", "LEGAL", "CLINICAL", "LOGISTICS"] as TabType[]).map((tab, idx) => {
             const isActive = state.activeTab === tab;
             const isComplete = state.checkStepCompleteness(tab);
@@ -46,25 +46,23 @@ export default function DrawerHeader({ state, lead, onClose }: Props) {
                 key={tab}
                 onClick={() => !isLocked && state.setActiveTab(tab)}
                 disabled={isLocked}
-                className={`relative px-4 py-2 rounded-lg text-[9px] font-black uppercase tracking-[0.15em] transition-all flex items-center gap-2 group/tab
-                ${isActive ? "bg-[var(--primary)] text-black shadow-[0_0_15px_rgba(var(--primary-rgb),0.25)]" : isLocked ? "opacity-30 cursor-not-allowed grayscale" : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-white/5"}`}
+                className={`relative px-4 py-1.5 rounded-full text-[9px] font-extrabold uppercase tracking-[0.16em] transition-all duration-300 flex items-center gap-2 group/tab border border-transparent
+                ${isActive 
+                  ? "bg-white dark:bg-white/10 text-[var(--primary)] shadow-[0_2px_8px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] border-slate-200/50 dark:border-white/5" 
+                  : isLocked 
+                    ? "opacity-35 cursor-not-allowed text-slate-400 dark:text-neutral-600" 
+                    : "text-slate-500 hover:text-slate-900 dark:text-neutral-400 dark:hover:text-neutral-200 hover:bg-white/40 dark:hover:bg-white/[0.02]"}`}
               >
-                <span
-                  className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center text-[7px] transition-all
-                ${isActive ? "border-black/20 bg-black/5" : isComplete ? "bg-teal-500/20 border-teal-500/40 text-teal-500" : isLocked ? "border-[var(--card-border)]/30 opacity-50" : "border-[var(--card-border)]"}`}
-                >
-                  {isComplete && !isActive ? (
-                    <Check className="w-2 h-2" />
-                  ) : isLocked ? (
-                    <FolderLock className="w-2 h-2" />
-                  ) : (
-                    `0${idx + 1}`
-                  )}
-                </span>
-                {tab}
-                {isActive && (
-                  <div className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-0.75 h-0.75 rounded-full bg-black/40" />
+                {isComplete && !isActive ? (
+                  <Check className="w-3 h-3 text-emerald-600 dark:text-emerald-400 stroke-[3]" />
+                ) : isLocked ? (
+                  <FolderLock className="w-3 h-3 text-slate-400 dark:text-neutral-600" />
+                ) : (
+                  <span className={`text-[8.5px] font-black ${isActive ? "text-[var(--primary)]" : "text-slate-400 dark:text-neutral-500"}`}>
+                    0{idx + 1}
+                  </span>
                 )}
+                <span>{tab}</span>
               </button>
             );
           })}

emr-client/src/components/ShiftReportModal.tsx

@@ -154,6 +154,7 @@ export function ShiftReportModal({
                     <CustomDatePicker 
                       value={selectedDate}
                       onChange={(val) => setSelectedDate(val)}
+                      align="right"
                     />
                   </div>
                   <div className="h-6 w-[1px] bg-[var(--card-border)] hidden sm:block" />