feat: polish BI dashboards and bump version

src/modules/energy/SubTabs.tsx

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import { SegmentedNav } from '../../components/ui/surface';
 
 interface SubTab<T extends string> {
   id: T;
@@ -14,26 +15,8 @@ interface Props<T extends string> {
 
 export default function SubTabs<T extends string>({ tabs, active, onChange }: Props<T>) {
   return (
-    <div className="sticky top-0 z-30 -mx-3 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-4 bg-[#F8F9FB] shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)]">
-      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
-        <div className="p-1 flex gap-1">
-          {tabs.map(({ id, label, icon: Icon }) => {
-            const isActive = active === id;
-            return (
-              <button
-                key={id}
-                onClick={() => onChange(id)}
-                className={`flex-1 flex items-center justify-center gap-1.5 rounded-xl py-1.5 text-[12px] font-bold transition-all ${
-                  isActive ? 'bg-blue-50 text-blue-600' : 'text-slate-400 hover:bg-slate-50'
-                }`}
-              >
-                <Icon size={14} />
-                <span>{label}</span>
-              </button>
-            );
-          })}
-        </div>
-      </div>
+    <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
+      <SegmentedNav tabs={tabs} active={active} onChange={onChange} />
     </div>
   );
 }