Merge branch 'refactor/zalo-bot-fast-entry-ui' into 'develop'

refactor(zalo-bot): replace emojis with svg icons and category badges in fast-entry guidance

See merge request !57

src/i18n/locales/en.json

@@ -1296,7 +1296,7 @@
       "title": "Link Bot Zalo",
       "hint": "Send a message to Bot FinWise on Zalo to automatically connect alerts.",
       "placeholder": "e.g. dbcb8889dbdc32826bcd",
-      "linked": "Bot Zalo linked",
+      "linked": "Linked",
       "unlink": "Unlink",
       "saveChat": "Save Chat ID",
       "oneClickBtn": "Link via Bot Zalo",

src/i18n/locales/vi.json

@@ -1360,7 +1360,7 @@
       "title": "Liên kết Bot Zalo",
       "hint": "Gửi tin nhắn cho Bot FinWise để kết nối nhận thông báo tự động.",
       "placeholder": "Ví dụ: dbcb8889dbdc32826bcd",
-      "linked": "Đã liên kết Bot Zalo",
+      "linked": "Đã liên kết",
       "unlink": "Hủy liên kết",
       "saveChat": "Lưu Chat ID",
       "oneClickBtn": "Kết nối với Bot Zalo",

src/pages/notifications/components/NotificationSettings.tsx

@@ -324,7 +324,9 @@ export const NotificationSettings: React.FC<NotificationSettingsProps> = ({ sett
                 {/* Panel hướng dẫn Fast-Entry */}
                 <div className="rounded-clay-md border border-emerald-200 bg-emerald-50/60 p-4 shadow-clay-pressed">
                   <div className="flex items-center gap-2 mb-2">
-                    <span className="text-emerald-600 text-base">⚡</span>
+                    <svg className="w-4 h-4 text-emerald-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="currentColor" fillOpacity="0.2" />
+                    </svg>
                     <span className="font-nunito text-sm font-bold text-emerald-800">
                       {t("notification.fastEntry.title")}
                     </span>
@@ -334,18 +336,73 @@ export const NotificationSettings: React.FC<NotificationSettingsProps> = ({ sett
                   </p>
                   <div className="flex flex-col gap-1.5">
                     {[
-                      { icon: "☕", msg: "Cà phê sáng 35k ví tiền mặt" },
-                      { icon: "🍜", msg: "Ăn trưa 50k" },
-                      { icon: "💰", msg: "Vừa nhận lương 20tr ví VCB" },
-                      { icon: "↩️", msg: "hoàn tác" },
-                      { icon: "✏️", msg: "sửa thành 40k" },
-                    ].map(({ icon, msg }) => (
+                      {
+                        label: "Chi tiêu",
+                        badgeColor: "bg-rose-50 text-rose-700 border-rose-200/80",
+                        msg: "Cà phê sáng 35k ví tiền mặt",
+                        icon: (
+                          <svg className="w-3.5 h-3.5 text-rose-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19" />
+                            <polyline points="19 12 12 19 5 12" />
+                          </svg>
+                        ),
+                      },
+                      {
+                        label: "Chi tiêu",
+                        badgeColor: "bg-rose-50 text-rose-700 border-rose-200/80",
+                        msg: "Ăn trưa 50k",
+                        icon: (
+                          <svg className="w-3.5 h-3.5 text-rose-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19" />
+                            <polyline points="19 12 12 19 5 12" />
+                          </svg>
+                        ),
+                      },
+                      {
+                        label: "Thu nhập",
+                        badgeColor: "bg-emerald-50 text-emerald-700 border-emerald-200/80",
+                        msg: "Vừa nhận lương 20tr ví VCB",
+                        icon: (
+                          <svg className="w-3.5 h-3.5 text-emerald-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="12" y1="19" x2="12" y2="5" />
+                            <polyline points="5 12 12 5 19 12" />
+                          </svg>
+                        ),
+                      },
+                      {
+                        label: "Hoàn tác",
+                        badgeColor: "bg-amber-50 text-amber-700 border-amber-200/80",
+                        msg: "hoàn tác",
+                        icon: (
+                          <svg className="w-3.5 h-3.5 text-amber-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="1 4 1 10 7 10" />
+                            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+                          </svg>
+                        ),
+                      },
+                      {
+                        label: "Sửa vi sai",
+                        badgeColor: "bg-blue-50 text-blue-700 border-blue-200/80",
+                        msg: "sửa thành 40k",
+                        icon: (
+                          <svg className="w-3.5 h-3.5 text-blue-600 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <path d="M12 20h9" />
+                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+                          </svg>
+                        ),
+                      },
+                    ].map(({ label, badgeColor, msg, icon }) => (
                       <div
                         key={msg}
-                        className="flex items-start gap-2 rounded-clay-sm bg-white/70 px-2.5 py-1.5 border border-emerald-100"
+                        className="flex items-center gap-2 rounded-clay-sm bg-white/80 px-2.5 py-1.5 border border-emerald-100/80 shadow-sm"
                       >
-                        <span className="text-sm">{icon}</span>
-                        <code className="font-mono text-xs text-emerald-900 select-all break-all">{msg}</code>
+                        <div className="flex items-center gap-1.5 shrink-0">
+                          {icon}
+                          <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${badgeColor}`}>
+                            {label}
+                          </span>
+                        </div>
+                        <code className="font-mono text-xs text-emerald-950 select-all break-all flex-1">{msg}</code>
                       </div>
                     ))}
                   </div>