feat: initialize project structure with core components and pages

- Added shared styles for UI components in `src/components/styles.ts`.
- Created configuration constants in `src/lib/config.ts`.
- Implemented date formatting and greeting functions in `src/lib/dates.ts` and corresponding tests in `src/lib/dates.test.ts`.
- Developed incident management functions in `src/lib/incidents.ts` with tests in `src/lib/incidents.test.ts`.
- Established navigation structure in `src/lib/navigation.ts`.
- Seeded demo data for incidents and users in `src/lib/seed.ts`.
- Defined tone classes for UI elements in `src/lib/tones.ts`.
- Created type definitions for incidents and related entities in `src/lib/types.ts`.
- Set up main application entry point in `src/main.tsx`.
- Developed various pages including About, Analytics, Incidents, Locations, Overview, and Report Incident.
- Configured testing setup in `src/test/setup.ts` and TypeScript configurations.
- Integrated Vite for development and testing with appropriate plugins.

src/components/MetricCard.tsx

@@ -0,0 +1,25 @@
+import type { LucideIcon } from 'lucide-react'
+import { toneClasses, type Tone } from '../lib/tones'
+
+interface MetricCardProps {
+  label: string
+  value: string
+  delta: string
+  icon: LucideIcon
+  tone: Tone
+}
+
+export function MetricCard({ label, value, delta, icon: Icon, tone }: MetricCardProps) {
+  return (
+    <div className="rounded-lg border border-line bg-white p-[13px] sm:p-[18px]">
+      <div className={`grid size-[35px] place-items-center rounded-[7px] ${toneClasses[tone]}`}>
+        <Icon size={19} />
+      </div>
+      <span className="mt-2.5 mb-1.5 block text-xs text-muted sm:mt-[15px]">{label}</span>
+      <strong className="block font-display text-[25px] font-semibold tracking-[-1px] text-ink sm:text-[30px]">{value}</strong>
+      <small className="mt-[9px] block text-[9px] text-[#7d8b86] sm:text-2xs">
+        <b className="text-positive">↗</b> {delta}
+      </small>
+    </div>
+  )
+}