fix: improvements for frontend

apps/start/src/utils/date.ts

@@ -32,6 +32,8 @@ export function formatDateTime(date: Date) {
     hour: '2-digit',
     minute: '2-digit',
     hour12: false,
+    year:
+      date.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
   }).format(date);
 
   return `${datePart}, ${timePart}`;

apps/start/src/utils/theme.ts

@@ -7,27 +7,25 @@
 // export const theme = resolvedTailwindConfig.theme as Record<string, any>;
 
 const chartColors = [
-  '#2563EB',
-  '#ff7557',
-  '#7fe1d8',
-  '#f8bc3c',
-  '#b3596e',
-  '#72bef4',
-  '#ffb27a',
-  '#0f7ea0',
-  '#3ba974',
-  '#febbb2',
-  '#cb80dc',
-  '#5cb7af',
-  '#7856ff',
+  { main: '#2563EB', translucent: 'rgba(37, 99, 235, 0.1)' },
+  { main: '#ff7557', translucent: 'rgba(255, 117, 87, 0.1)' },
+  { main: '#7fe1d8', translucent: 'rgba(127, 225, 216, 0.1)' },
+  { main: '#f8bc3c', translucent: 'rgba(248, 188, 60, 0.1)' },
+  { main: '#b3596e', translucent: 'rgba(179, 89, 110, 0.1)' },
+  { main: '#72bef4', translucent: 'rgba(114, 190, 244, 0.1)' },
+  { main: '#ffb27a', translucent: 'rgba(255, 178, 122, 0.1)' },
+  { main: '#0f7ea0', translucent: 'rgba(15, 126, 160, 0.1)' },
+  { main: '#3ba974', translucent: 'rgba(59, 169, 116, 0.1)' },
+  { main: '#febbb2', translucent: 'rgba(254, 187, 178, 0.1)' },
+  { main: '#cb80dc', translucent: 'rgba(203, 128, 220, 0.1)' },
+  { main: '#5cb7af', translucent: 'rgba(92, 183, 175, 0.1)' },
+  { main: '#7856ff', translucent: 'rgba(120, 86, 255, 0.1)' },
 ];
 
 export function getChartColor(index: number): string {
-  // const colors = theme?.colors ?? {};
-  // const chartColors: string[] = Object.keys(colors)
-  //   .filter((key) => key.startsWith('chart-'))
-  //   .map((key) => colors[key])
-  //   .filter((item): item is string => typeof item === 'string');
-
-  return chartColors[index % chartColors.length]!;
+  return chartColors[index % chartColors.length]!.main;
+}
+
+export function getChartTranslucentColor(index: number): string {
+  return chartColors[index % chartColors.length]!.translucent;
 }