feat: polish bank operation cards and dates

src/shared/ui/EntryCard.tsx

@@ -8,6 +8,8 @@ type EntryCardProps = {
 	details?: ReactNode;
 	actions?: ReactNode;
 	initial: string;
+	icon?: ReactNode;
+	color?: string;
 	imageSrc?: string | null;
 	value: string;
 	valueLabel: string;
@@ -17,7 +19,17 @@ type EntryCardProps = {
 const EntryCard: FC<EntryCardProps> = (props) => {
 	const [imageFailed, setImageFailed] = useState(false);
 	return (
-		<Paper className={classes.row} withBorder>
+		<Paper
+			className={classes.row}
+			withBorder
+			style={
+				props.color
+					? {
+							background: `color-mix(in srgb, var(--mantine-color-${props.color}-0) 45%, white)`,
+						}
+					: undefined
+			}
+		>
 			<Avatar
 				alt=""
 				aria-hidden="true"
@@ -26,7 +38,7 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 				src={imageFailed ? null : props.imageSrc}
 				onError={() => setImageFailed(true)}
 			>
-				{props.initial}
+				{props.icon ?? props.initial}
 			</Avatar>
 			<Stack className={classes.identity} gap={2}>
 				<Text fw={700} lineClamp={1}>