feat: add frontend dashboard for run results viewer

- Implemented main dashboard with run metrics and filtering options.
- Created detailed view for individual runs with results and anomalies.
- Added product listing page with filtering and pagination.
- Introduced utility functions for formatting dates and numbers.
- Styled components with CSS for a clean and responsive layout.
- Set up HTML entry point and linked to the main JavaScript file.
- Updated TypeScript configuration to include DOM types.

src/web/styles.css

@@ -0,0 +1,258 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  background: #f6f7f8;
+  color: #121418;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #e7e8ea;
+  border-radius: 12px;
+  padding: 14px;
+}
+
+.toolbar {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.toolbar input,
+.toolbar select,
+button {
+  height: 36px;
+  border-radius: 8px;
+  border: 1px solid #d8dce0;
+  background: #fff;
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+button {
+  cursor: pointer;
+}
+
+.table-wrap {
+  overflow: auto;
+  border: 1px solid #eceef0;
+  border-radius: 10px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 980px;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 10px;
+  border-bottom: 1px solid #f0f1f3;
+  white-space: nowrap;
+  font-size: 13px;
+}
+
+.reason-col {
+  min-width: 280px;
+  max-width: 420px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+th {
+  background: #fafafb;
+  font-weight: 600;
+}
+
+th button {
+  all: unset;
+  cursor: pointer;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.badge-fba {
+  background: #dff7e6;
+  color: #1e7a39;
+}
+
+.badge-fbm {
+  background: #e6f0ff;
+  color: #245fce;
+}
+
+.badge-skip {
+  background: #ffe9e7;
+  color: #b5382a;
+}
+
+.badge-ok {
+  background: #dff7e6;
+  color: #1e7a39;
+}
+
+.badge-failed {
+  background: #ffe9e7;
+  color: #b5382a;
+}
+
+.badge-empty {
+  background: #f2f4f7;
+  color: #5f6b7a;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.metric {
+  background: #ffffff;
+  border: 1px solid #e7e8ea;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.metric[role="button"]:hover {
+  cursor: pointer;
+}
+
+
+.metric .label {
+  font-size: 12px;
+  color: #677282;
+}
+
+.metric .value {
+  margin-top: 4px;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.pager {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.meta {
+  font-size: 13px;
+  color: #445060;
+}
+
+.back {
+  width: 120px;
+}
+
+.tiny-bar {
+  width: 100px;
+  height: 8px;
+  border-radius: 999px;
+  background: #eef1f4;
+  overflow: hidden;
+  display: flex;
+}
+
+.tiny-fba {
+  background: #1e7a39;
+  height: 100%;
+}
+
+.tiny-fbm {
+  background: #245fce;
+  height: 100%;
+}
+
+.tiny-skip {
+  background: #b5382a;
+  height: 100%;
+}
+
+.spark-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.spark-item {
+  border: 1px solid #eceef0;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.spark-label {
+  font-size: 11px;
+  color: #677282;
+  margin-bottom: 6px;
+}
+
+.anomaly-list {
+  display: grid;
+  gap: 6px;
+}
+
+.anomaly-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 10px;
+  align-items: center;
+  border: 1px solid #eceef0;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+@media (max-width: 1000px) {
+  .toolbar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .metrics,
+  .meta-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .spark-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}