feat: implement native IndexedDB cache-first data layer

package.json

@@ -10,19 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "lucide-react": "^0.577.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.27",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "npm:rolldown-vite@7.2.5"

src/App.css

@@ -1,6 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
+/* Styles replaced by Tailwind CSS */

src/App.tsx

@@ -1,11 +1,8 @@
-import './App.css'
+import Dashboard from './components/Dashboard/Dashboard'
 
 function App() {
-
   return (
-    <>
-      <h1>Hello, OrgExplorer!</h1>
-    </>
+    <Dashboard />
   )
 }
 

src/components/Dashboard/ContributorActivity.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { 
+  LineChart, 
+  Line, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer 
+} from 'recharts';
+
+interface ActivityData {
+  week: string;
+  commits: number;
+}
+
+interface ContributorActivityProps {
+  data: ActivityData[];
+  name: string;
+}
+
+export const ContributorActivity: React.FC<ContributorActivityProps> = ({ data, name }) => {
+  return (
+    <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 h-[300px]">
+      <h3 className="text-sm font-semibold mb-4 text-gray-800 dark:text-gray-100">
+        Commit Activity for <span className="text-blue-500">{name}</span>
+      </h3>
+      <ResponsiveContainer width="100%" height="80%">
+        <LineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" className="dark:stroke-gray-700" />
+          <XAxis 
+            dataKey="week" 
+            tick={{ fontSize: 10 }} 
+            stroke="#9ca3af"
+          />
+          <YAxis stroke="#9ca3af" tick={{ fontSize: 10 }} />
+          <Tooltip 
+            contentStyle={{ 
+              backgroundColor: 'rgba(255, 255, 255, 0.95)', 
+              borderRadius: '8px', 
+              border: 'none',
+              boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
+            }}
+          />
+          <Line 
+            type="monotone" 
+            dataKey="commits" 
+            stroke="#3b82f6" 
+            strokeWidth={2} 
+            dot={{ r: 3, fill: '#3b82f6' }}
+            activeDot={{ r: 5 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

src/components/Dashboard/ContributorChart.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { 
+  BarChart, 
+  Bar, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  ResponsiveContainer,
+  Cell
+} from 'recharts';
+import type { ContributorData } from './types';
+
+interface ContributorChartProps {
+  data: ContributorData[];
+}
+
+const COLORS = ['#6366f1', '#818cf8', '#a5b4fc', '#c7d2fe', '#e0e7ff'];
+
+export const ContributorChart: React.FC<ContributorChartProps> = ({ data }) => {
+  return (
+    <div className="bg-white dark:bg-gray-900 p-6 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 h-[400px]">
+      <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">Top Contributors by Commits</h3>
+      <ResponsiveContainer width="100%" height="90%">
+        <BarChart
+          data={data}
+          layout="vertical"
+          margin={{ top: 5, right: 30, left: 40, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#e5e7eb" className="dark:stroke-gray-700" />
+          <XAxis type="number" hide />
+          <YAxis 
+            dataKey="name" 
+            type="category" 
+            width={100}
+            tick={{ fontSize: 11, fill: '#9ca3af' }}
+            stroke="none"
+          />
+          <Tooltip 
+            cursor={{ fill: '#f3f4f6', opacity: 0.1 }}
+            contentStyle={{ 
+              backgroundColor: 'rgba(255, 255, 255, 0.9)', 
+              borderRadius: '8px', 
+              border: 'none',
+              boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
+            }}
+          />
+          <Bar dataKey="commits" radius={[0, 4, 4, 0]}>
+            {data.map((_, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

src/components/Dashboard/ContributorModal.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { X, Mail, ExternalLink } from 'lucide-react';
+import type { ContributorData } from './types';
+
+interface ContributorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  contributors: ContributorData[];
+}
+
+export const ContributorModal: React.FC<ContributorModalProps> = ({ isOpen, onClose, title, contributors }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="bg-white dark:bg-gray-900 w-full max-w-2xl max-h-[80vh] rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
+        <div className="p-6 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold dark:text-white">{title}</h2>
+            <p className="text-sm text-gray-500">{contributors.length} contributors found</p>
+          </div>
+          <button 
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
+          >
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {contributors.map((c) => (
+              <div key={c.name} className="flex items-center justify-between p-4 rounded-xl border border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                <div className="flex items-center space-x-3">
+                  <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center font-bold text-blue-600 dark:text-blue-400">
+                    {c.name[0].toUpperCase()}
+                  </div>
+                  <div>
+                    <p className="font-semibold text-sm dark:text-gray-200">{c.name}</p>
+                    <p className="text-xs text-gray-500">{c.commits} commits</p>
+                  </div>
+                </div>
+                <div className="flex space-x-1">
+                   <button className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-400 hover:text-blue-500"><Mail className="w-4 h-4" /></button>
+                   <button className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-400 hover:text-blue-500"><ExternalLink className="w-4 h-4" /></button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="p-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800 text-center">
+          <button 
+            onClick={onClose}
+            className="px-6 py-2 bg-gray-900 dark:bg-white dark:text-gray-900 text-white rounded-xl font-bold text-sm hover:opacity-90 transition-opacity"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};