feat: Initialize License Tracker Pro v1.2 project

Adds initial project structure, dependencies, and basic configuration for the License Tracker Pro v1.2 application. This includes setting up Vite for the build process, defining core types, and incorporating essential UI components like icons and a timeline. The project is now ready for development.
2026-01-26 18:55:43 -08:00
parent d4895c6d81
commit e045354892
56 changed files with 3410 additions and 8 deletions
@@ -0,0 +1,42 @@
+
+import React from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { License } from '../types';
+
+interface PriceHistoryChartProps {
+    license: License;
+}
+
+const formatCurrency = (value: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(value);
+
+const PriceHistoryChart: React.FC<PriceHistoryChartProps> = ({ license }) => {
+    const data = [
+        { date: new Date(license.purchaseDate), price: license.purchasePrice },
+        ...(license.renewals || []).map(r => ({ date: new Date(r.renewalDate), price: r.renewalPrice }))
+    ]
+    .map(i => ({ ...i, time: i.date.getTime(), str: i.date.toLocaleDateString() }))
+    .filter(i => !isNaN(i.time))
+    .sort((a, b) => a.time - b.time);
+
+    if (data.length < 2) {
+        return <div className="flex items-center justify-center h-32 text-xs text-gray-500 bg-slate-900/30 rounded">No price history</div>;
+    }
+
+    return (
+        <ResponsiveContainer width="100%" height={160}>
+            <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+                <XAxis dataKey="time" type="number" domain={['dataMin', 'dataMax']} tickFormatter={(t) => new Date(t).toLocaleDateString(undefined, {month:'short', year:'2-digit'})} stroke="#9ca3af" tick={{fontSize: 10}} />
+                <YAxis stroke="#9ca3af" tick={{fontSize: 10}} tickFormatter={(v) => `$${v}`} width={40} />
+                <Tooltip 
+                    contentStyle={{ backgroundColor: '#1e293b', borderColor: '#475569', color: '#f1f5f9' }}
+                    labelFormatter={(l) => new Date(l).toLocaleDateString()}
+                    formatter={(val: number) => [formatCurrency(val), 'Price']}
+                />
+                <Line type="monotone" dataKey="price" stroke="#22d3ee" strokeWidth={2} dot={{r:3}} activeDot={{r:5}} />
+            </LineChart>
+        </ResponsiveContainer>
+    );
+};
+
+export default PriceHistoryChart;