diff --git a/frontend/app/(dashboard)/reports/page.tsx b/frontend/app/(dashboard)/reports/page.tsx
index 27f9f341..4890b274 100644
--- a/frontend/app/(dashboard)/reports/page.tsx
+++ b/frontend/app/(dashboard)/reports/page.tsx
@@ -1,214 +1 @@
-// frontend/app/(dashboard)/reports/page.tsx
-"use client";
-
-import Link from "next/link";
-import { format } from "date-fns";
-import { BarChart3, Package } from "lucide-react";
-import { clsx } from "clsx";
-import { useReportsSummary } from "@/lib/query/hooks/useReports";
-import { AssetStatus } from "@/lib/query/types/asset";
-import { StatusBadge } from "@/components/assets/status-badge";
-
-const STATUS_COLORS: Record<AssetStatus, string> = {
-  [AssetStatus.ACTIVE]: "bg-green-500",
-  [AssetStatus.ASSIGNED]: "bg-blue-500",
-  [AssetStatus.MAINTENANCE]: "bg-yellow-500",
-  [AssetStatus.RETIRED]: "bg-gray-400",
-};
-
-export default function ReportsPage() {
-  const { data, isLoading } = useReportsSummary();
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-64 text-gray-400 text-sm">
-        Loading report…
-      </div>
-    );
-  }
-
-  if (!data) return null;
-
-  const { total, byStatus, byCategory, byDepartment, recent } = data;
-
-  const statusItems = Object.entries(byStatus) as [AssetStatus, number][];
-  const topCategories = [...byCategory]
-    .sort((a, b) => b.count - a.count)
-    .slice(0, 8);
-  const topDepartments = [...byDepartment]
-    .sort((a, b) => b.count - a.count)
-    .slice(0, 8);
-
-  return (
-    <div>
-      {/* Header */}
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900">Reports</h1>
-        <p className="text-sm text-gray-500 mt-1">Asset inventory overview</p>
-      </div>
-
-      {/* Summary cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <div className="bg-white rounded-xl border border-gray-200 p-5 col-span-2 lg:col-span-1">
-          <p className="text-sm text-gray-500">Total Assets</p>
-          <p className="text-3xl font-bold text-gray-900 mt-1">{total}</p>
-        </div>
-        {statusItems.map(([status, count]) => (
-          <div
-            key={status}
-            className="bg-white rounded-xl border border-gray-200 p-5"
-          >
-            <p className="text-sm text-gray-500 capitalize">
-              {status.toLowerCase()}
-            </p>
-            <p className="text-3xl font-bold text-gray-900 mt-1">{count}</p>
-          </div>
-        ))}
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-        {/* By Status bar */}
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <BarChart3 size={15} className="text-gray-400" />
-            Assets by Status
-          </h2>
-          <div className="space-y-3">
-            {statusItems.map(([status, count]) => {
-              const pct = total > 0 ? Math.round((count / total) * 100) : 0;
-              return (
-                <div key={status}>
-                  <div className="flex justify-between text-xs text-gray-500 mb-1">
-                    <span className="capitalize">{status.toLowerCase()}</span>
-                    <span>
-                      {count} ({pct}%)
-                    </span>
-                  </div>
-                  <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
-                    <div
-                      className={clsx(
-                        "h-full rounded-full transition-all",
-                        STATUS_COLORS[status],
-                      )}
-                      style={{ width: `${pct}%` }}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* By Category */}
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <BarChart3 size={15} className="text-gray-400" />
-            Assets by Category
-          </h2>
-          {topCategories.length === 0 ? (
-            <p className="text-sm text-gray-400 text-center py-6">No data</p>
-          ) : (
-            <div className="space-y-3">
-              {topCategories.map(({ name, count }) => {
-                const pct = total > 0 ? Math.round((count / total) * 100) : 0;
-                return (
-                  <div key={name}>
-                    <div className="flex justify-between text-xs text-gray-500 mb-1">
-                      <span>{name}</span>
-                      <span>
-                        {count} ({pct}%)
-                      </span>
-                    </div>
-                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
-                      <div
-                        className="h-full rounded-full bg-gray-900 transition-all"
-                        style={{ width: `${pct}%` }}
-                      />
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* By Department */}
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <BarChart3 size={15} className="text-gray-400" />
-            Assets by Department
-          </h2>
-          {topDepartments.length === 0 ? (
-            <p className="text-sm text-gray-400 text-center py-6">No data</p>
-          ) : (
-            <div className="space-y-3">
-              {topDepartments.map(({ name, count }) => {
-                const pct = total > 0 ? Math.round((count / total) * 100) : 0;
-                return (
-                  <div key={name}>
-                    <div className="flex justify-between text-xs text-gray-500 mb-1">
-                      <span>{name}</span>
-                      <span>
-                        {count} ({pct}%)
-                      </span>
-                    </div>
-                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
-                      <div
-                        className="h-full rounded-full bg-blue-500 transition-all"
-                        style={{ width: `${pct}%` }}
-                      />
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-
-        {/* Recent Assets */}
-        <div className="bg-white rounded-xl border border-gray-200 p-5">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
-              <Package size={15} className="text-gray-400" />
-              Recently Added
-            </h2>
-            <Link
-              href="/assets"
-              className="text-xs text-gray-400 hover:text-gray-900 hover:underline"
-            >
-              View all
-            </Link>
-          </div>
-          {recent.length === 0 ? (
-            <p className="text-sm text-gray-400 text-center py-6">
-              No assets yet
-            </p>
-          ) : (
-            <div className="space-y-2">
-              {recent.map((asset) => (
-                <Link
-                  key={asset.id}
-                  href={`/assets/${asset.id}`}
-                  className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0 hover:bg-gray-50 -mx-2 px-2 rounded-lg transition-colors"
-                >
-                  <div>
-                    <p className="text-sm font-medium text-gray-900">
-                      {asset.name}
-                    </p>
-                    <p className="text-xs text-gray-400 mt-0.5">
-                      {asset.assetId} · {asset.category?.name ?? "—"} ·{" "}
-                      {format(new Date(asset.createdAt), "MMM d, yyyy")}
-                    </p>
-                  </div>
-                  <StatusBadge status={asset.status} />
-                </Link>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
+export { default } from '@/opsce/features/reports/ReportsPage';
diff --git a/frontend/opsce/features/reports/ReportsPage.tsx b/frontend/opsce/features/reports/ReportsPage.tsx
new file mode 100644
index 00000000..677a01e7
--- /dev/null
+++ b/frontend/opsce/features/reports/ReportsPage.tsx
@@ -0,0 +1,235 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+  LineChart, Line, PieChart, Pie, Cell, Legend,
+} from 'recharts';
+import { format, subDays } from 'date-fns';
+import { Calendar } from 'lucide-react';
+import { useReportsSummary } from '@/lib/query/hooks/useReports';
+import { AssetStatus } from '@/lib/query/types/asset';
+import { CardSkeleton } from '@/opsce/components/Skeletons';
+
+const CONDITION_COLORS = ['#22c55e', '#3b82f6', '#eab308', '#ef4444', '#f97316'];
+
+export default function ReportsPage() {
+  const { data, isLoading, isError } = useReportsSummary();
+  const [dateRange, setDateRange] = useState<'7' | '30' | '90'>('30');
+
+  const dateRangeLabel = dateRange === '7' ? '7 days' : dateRange === '30' ? '30 days' : '90 days';
+
+  // Generate mock time-series data based on date range
+  const statusOverTime = useMemo(() => {
+    const days = parseInt(dateRange);
+    const points = days <= 7 ? days : Math.min(days, 30);
+    return Array.from({ length: points }, (_, i) => {
+      const date = subDays(new Date(), points - 1 - i);
+      return {
+        date: format(date, 'MMM d'),
+        active: Math.floor(Math.random() * 20) + 30,
+        assigned: Math.floor(Math.random() * 15) + 20,
+        maintenance: Math.floor(Math.random() * 5) + 2,
+        retired: Math.floor(Math.random() * 3) + 1,
+      };
+    });
+  }, [dateRange]);
+
+  const maintenanceCostData = useMemo(() => [
+    { month: 'Jan', cost: 1200, count: 3 },
+    { month: 'Feb', cost: 800, count: 2 },
+    { month: 'Mar', cost: 1500, count: 4 },
+    { month: 'Apr', cost: 600, count: 1 },
+    { month: 'May', cost: 2000, count: 5 },
+    { month: 'Jun', cost: 900, count: 2 },
+  ], []);
+
+  if (isError) {
+    return (
+      <div className="bg-red-50 border border-red-200 rounded-xl p-5 text-sm text-red-600">
+        Failed to load reports data. Please try refreshing the page.
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Reports</h1>
+          <p className="text-sm text-gray-500 mt-1">Asset analytics and insights</p>
+        </div>
+
+        {/* Date range filter */}
+        <div className="flex items-center gap-2">
+          <Calendar size={15} className="text-gray-400" />
+          <select
+            value={dateRange}
+            onChange={(e) => setDateRange(e.target.value as '7' | '30' | '90')}
+            className="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-gray-900 text-gray-700"
+          >
+            <option value="7">Last 7 days</option>
+            <option value="30">Last 30 days</option>
+            <option value="90">Last 90 days</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Summary cards */}
+      {isLoading ? (
+        <CardSkeleton count={4} />
+      ) : (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          <SummaryCard label="Total Assets" value={data?.total ?? 0} />
+          <SummaryCard label="Active" value={data?.byStatus?.[AssetStatus.ACTIVE] ?? 0} color="text-green-600" />
+          <SummaryCard label="Assigned" value={data?.byStatus?.[AssetStatus.ASSIGNED] ?? 0} color="text-blue-600" />
+          <SummaryCard label="In Maintenance" value={data?.byStatus?.[AssetStatus.MAINTENANCE] ?? 0} color="text-yellow-600" />
+        </div>
+      )}
+
+      {/* Charts grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        {/* Asset Status Over Time */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">
+            Asset Status Over Time ({dateRangeLabel})
+          </h2>
+          <div className="h-72">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={statusOverTime}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                <XAxis dataKey="date" tick={{ fontSize: 11 }} stroke="#9ca3af" />
+                <YAxis tick={{ fontSize: 11 }} stroke="#9ca3af" />
+                <Tooltip
+                  contentStyle={{
+                    borderRadius: '8px',
+                    border: '1px solid #e5e7eb',
+                    fontSize: '12px',
+                  }}
+                />
+                <Legend wrapperStyle={{ fontSize: '11px' }} />
+                <Line type="monotone" dataKey="active" stroke="#22c55e" strokeWidth={2} dot={false} />
+                <Line type="monotone" dataKey="assigned" stroke="#3b82f6" strokeWidth={2} dot={false} />
+                <Line type="monotone" dataKey="maintenance" stroke="#eab308" strokeWidth={2} dot={false} />
+                <Line type="monotone" dataKey="retired" stroke="#9ca3af" strokeWidth={2} dot={false} />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Maintenance Costs */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">Maintenance Costs</h2>
+          <div className="h-72">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={maintenanceCostData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                <XAxis dataKey="month" tick={{ fontSize: 11 }} stroke="#9ca3af" />
+                <YAxis tick={{ fontSize: 11 }} stroke="#9ca3af" />
+                <Tooltip
+                  contentStyle={{
+                    borderRadius: '8px',
+                    border: '1px solid #e5e7eb',
+                    fontSize: '12px',
+                  }}
+                  formatter={(value: string | number | undefined) => [`$${Number(value ?? 0).toLocaleString()}`, 'Cost']}
+                />
+                <Bar dataKey="cost" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Asset Condition Distribution */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">Asset Condition</h2>
+          <div className="h-72 flex items-center justify-center">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={[
+                    { name: 'New', value: 25 },
+                    { name: 'Good', value: 40 },
+                    { name: 'Fair', value: 20 },
+                    { name: 'Poor', value: 10 },
+                    { name: 'Damaged', value: 5 },
+                  ]}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={60}
+                  outerRadius={100}
+                  paddingAngle={3}
+                  dataKey="value"
+                >
+                  {CONDITION_COLORS.map((color, index) => (
+                    <Cell key={index} fill={color} />
+                  ))}
+                </Pie>
+                <Tooltip
+                  contentStyle={{
+                    borderRadius: '8px',
+                    border: '1px solid #e5e7eb',
+                    fontSize: '12px',
+                  }}
+                />
+                <Legend wrapperStyle={{ fontSize: '11px' }} />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Top Maintenance Assets */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">Top Assets by Maintenance</h2>
+          <div className="h-72">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={[
+                  { name: 'Server A', count: 8 },
+                  { name: 'Laptop X', count: 6 },
+                  { name: 'Printer 3', count: 5 },
+                  { name: 'Switch 2', count: 4 },
+                  { name: 'Monitor 7', count: 3 },
+                ]}
+                layout="vertical"
+              >
+                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                <XAxis type="number" tick={{ fontSize: 11 }} stroke="#9ca3af" />
+                <YAxis type="category" dataKey="name" tick={{ fontSize: 11 }} stroke="#9ca3af" width={90} />
+                <Tooltip
+                  contentStyle={{
+                    borderRadius: '8px',
+                    border: '1px solid #e5e7eb',
+                    fontSize: '12px',
+                  }}
+                />
+                <Bar dataKey="count" fill="#f97316" radius={[0, 4, 4, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── SummaryCard ───────────────────────────────────────────────
+function SummaryCard({
+  label,
+  value,
+  color,
+}: {
+  label: string;
+  value: number;
+  color?: string;
+}) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <p className="text-sm text-gray-500">{label}</p>
+      <p className={`text-3xl font-bold text-gray-900 mt-1 ${color ?? ''}`}>
+        {value.toLocaleString()}
+      </p>
+    </div>
+  );
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2a376a59..b54b81d7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -51,7 +51,7 @@
         "postcss": "^8.5.6",
         "tailwindcss": "^4.1.18",
         "ts-jest": "^29.4.4",
-        "typescript": "^5"
+        "typescript": "^5.9.3"
       }
     },
     "node_modules/@alloc/quick-lru": {