├── .gitignore
├── README.md
├── app.vue
├── assets
    └── css
    │   └── main.css
├── components
    ├── BMCButton.vue
    ├── BankItem.vue
    ├── Footer.vue
    ├── Icon
    │   ├── Coffee.vue
    │   └── Facebook.vue
    ├── MoneyInput.vue
    └── ResultDisplay.vue
├── data
    └── banks.ts
├── interfaces
    └── Bank.ts
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── public
    ├── .nojekyll
    ├── CodeTraveler.png
    ├── bank
    │   ├── Alpha-Saving.png
    │   ├── CIMB-Speed D+.png
    │   ├── Chill-D.png
    │   ├── Dime.png
    │   ├── KKP-Start-Saving.png
    │   ├── Kept.png
    │   ├── LH-B-You Wealth.png
    │   └── TTB-ME-Save.png
    ├── favicon.ico
    ├── font
    │   ├── LINESeedSansTH_W_Bd.woff2
    │   ├── LINESeedSansTH_W_He.woff2
    │   ├── LINESeedSansTH_W_Rg.woff2
    │   ├── LINESeedSansTH_W_Th.woff2
    │   └── LINESeedSansTH_W_XBd.woff2
    └── other
    │   └── flowchart.jpg
├── server
    └── tsconfig.json
├── tailwind.config.js
├── tsconfig.json
└── vitest.config.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SaveSmart
 2 | 
 3 | SaveSmart เป็นเครื่องมือที่ช่วยให้คุณเพิ่มดอกเบี้ยเงินฝากให้สูงสุด โดยการกระจายเงินฝากของคุณไปยังบัญชีธนาคารต่างๆ ตามอัตราดอกเบี้ยและเงื่อนไขของแต่ละบัญชี ที่มาจาก [เนิร์ดไฟแนนซ์](https://www.facebook.com/photo/?fbid=122135196230270713&set=a.122105441570270713). 
 4 | 
 5 | <div style="text-align: center;">
 6 |   <img src="public/other/flowchart.jpg" style="width: 500px" alt="Flow chart by เนิร์ดไฟแนนซ์">
 7 | </div>
 8 | 
 9 | ## Setup
10 | 
11 | Make sure to install the dependencies:
12 | 
13 | ```bash
14 | # npm
15 | npm install
16 | 
17 | # pnpm
18 | pnpm install
19 | 
20 | # yarn
21 | yarn install
22 | 
23 | # bun
24 | bun install
25 | ```
26 | 
27 | ## Development Server
28 | 
29 | Start the development server on `http://localhost:3000`:
30 | 
31 | ```bash
32 | # npm
33 | npm run dev
34 | 
35 | # pnpm
36 | pnpm run dev
37 | 
38 | # yarn
39 | yarn dev
40 | 
41 | # bun
42 | bun run dev
43 | ```
44 | 
45 | ## Production
46 | 
47 | Build the application for production:
48 | 
49 | ```bash
50 | # npm
51 | npm run build
52 | 
53 | # pnpm
54 | pnpm run build
55 | 
56 | # yarn
57 | yarn build
58 | 
59 | # bun
60 | bun run build
61 | ```
62 | 
63 | Locally preview production build:
64 | 
65 | ```bash
66 | # npm
67 | npm run preview
68 | 
69 | # pnpm
70 | pnpm run preview
71 | 
72 | # yarn
73 | yarn preview
74 | 
75 | # bun
76 | bun run preview
77 | ```
78 | 
79 | ## Contributors
80 | 
81 | <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
82 |   <a href="https://github.com/itoon/save-smart/graphs/contributors" style="margin-left: 1rem;">
83 |     <img src="https://contrib.rocks/image?repo=itoon/save-smart" />
84 |   </a>
85 | </div>
86 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg-[#2969FF] h-52">
  3 |     <div class="flex flex-col gap-1 py-4 pt-10 text-center text-white">
  4 |       <h1 class="text-2xl font-bold">ฝากเงินที่ไหนดี ?</h1>
  5 |       <p class="text-sm">เนิร์ดไฟแนนซ์ x CodeTraveler</p>
  6 |     </div>
  7 |   </div>
  8 |   <div class="flex flex-col gap-5">
  9 |     <MoneyInput
 10 |       v-if="isShowInput"
 11 |       v-model:saving="saving"
 12 |       v-model:canSavingMore2Years="canSavingMore2Years"
 13 |       @calculate="calculate"
 14 |     />
 15 |     <ResultDisplay
 16 |       v-else
 17 |       :saving="saving"
 18 |       :canSavingMore2Years="canSavingMore2Years"
 19 |       :isShowInput="isShowInput"
 20 |       @showInput="showInput"
 21 |     />
 22 |     <div class="container px-4 mx-auto" v-if="!isShowInput">
 23 |       <div class="mb-2">
 24 |         <h2 class="text-lg font-bold">
 25 |           ดอกเบี้ยรวมโดยประมาณ (หากฝากเงิน 1 ปี)
 26 |         </h2>
 27 |         <!-- <p class="text-[#A1A1A1] text-xs">ดอกเบี้ยรวมหากฝากเงิน 1 ปี</p> -->
 28 |       </div>
 29 |       <div class="border border-[#DFDFDF] p-4 bg-white rounded-lg flex gap-3">
 30 |         <div class="flex justify-between flex-1">
 31 |           <div class="flex flex-col gap-0.5">
 32 |             <div class="flex items-center gap-1 text-sm">
 33 |               <p class="text-sm font-bold">ดอกเบี้ยรวมทุกธนาคาร</p>
 34 |               <span
 35 |                 v-if="!isShowInput"
 36 |                 class="p-0.5 px-1 rounded-lg text-[10px] font-bold bg-green-300"
 37 |               >
 38 |                 {{ ((sumTotalInterest / saving) * 100).toFixed(2) }}%
 39 |               </span>
 40 |             </div>
 41 |             <div v-if="sumTotalInterest > 20000">
 42 |               <p class="text-[#A1A1A1] text-xs">
 43 |                 <!-- *กรณีดอกเบี้ยมากกว่า ฿20,000 เสียภาษี 15% -->
 44 |                 หัก ภาษี 15% (ดอกเบี้ยเกิน ฿20,000)
 45 |               </p>
 46 |               <p class="text-[#A1A1A1] text-xs">ดอกเบี้ยหลังหักภาษี</p>
 47 |             </div>
 48 |           </div>
 49 |           <div class="flex flex-col gap-0.5">
 50 |             <p class="text-sm font-bold text-right">
 51 |               {{
 52 |                 Intl.NumberFormat("th-TH", {
 53 |                   style: "currency",
 54 |                   currency: "THB",
 55 |                 }).format(sumTotalInterest)
 56 |               }}
 57 |             </p>
 58 |             <p
 59 |               v-if="sumTotalInterest > 20000"
 60 |               class="text-right text-xs text-[#A1A1A1]"
 61 |             >
 62 |               {{
 63 |                 Intl.NumberFormat("th-TH", {
 64 |                   style: "currency",
 65 |                   currency: "THB",
 66 |                 }).format(sumTotalInterest * 0.15)
 67 |               }}
 68 |             </p>
 69 |             <p
 70 |               v-if="sumTotalInterest > 20000"
 71 |               class="text-right text-xs text-[#A1A1A1]"
 72 |             >
 73 |               {{
 74 |                 Intl.NumberFormat("th-TH", {
 75 |                   style: "currency",
 76 |                   currency: "THB",
 77 |                 }).format(sumTotalInterest - sumTotalInterest * 0.15)
 78 |               }}
 79 |             </p>
 80 |           </div>
 81 |         </div>
 82 |       </div>
 83 |     </div>
 84 |     <div class="container px-4 pb-4 mx-auto">
 85 |       <div class="mb-2">
 86 |         <h2 class="text-lg font-bold">ฝากที่ไหนบ้าง</h2>
 87 |       </div>
 88 |       <div class="flex flex-col gap-2">
 89 |         <BankItem
 90 |           v-for="(summary, index) in bankCalculator"
 91 |           :key="index"
 92 |           :index="index"
 93 |           :summary="summary"
 94 |           :isShowInput="isShowInput"
 95 |         />
 96 |       </div>
 97 |     </div>
 98 |   </div>
 99 |   <Footer />
100 | </template>
101 | 
102 | <script setup lang="ts">
103 | import { banks } from "~/data/banks";
104 | 
105 | const saving = ref(0);
106 | const canSavingMore2Years = ref(false);
107 | const isShowInput = ref(true);
108 | const bankCalculator = ref(banks);
109 | const initialBank = JSON.parse(JSON.stringify(banks));
110 | const showInput = () => {
111 |   isShowInput.value = true;
112 |   resetBanksValue();
113 | };
114 | 
115 | const sumTotalInterest = ref(0);
116 | 
117 | const resetBanksValue = () => {
118 |   bankCalculator.value = initialBank;
119 |   sumTotalInterest.value = 0;
120 | };
121 | 
122 | const calculateSumTotalInterest = () => {
123 |   sumTotalInterest.value = bankCalculator.value.reduce(
124 |     (acc, bank) => acc + bank.totalInterest,
125 |     0
126 |   );
127 | };
128 | 
129 | const calculateTotalInterest = (bank: (typeof banks)[0]) =>
130 |   bank.saving * bank.interest;
131 | 
132 | const calculate = () => {
133 |   isShowInput.value = false;
134 |   bankCalculator.value.forEach((bank) => {
135 |     bank.saving = 0;
136 |     bank.ratio = 0;
137 |     bank.totalInterest = 0;
138 |   });
139 |   const saveDime = 10000;
140 |   let remainSaving = 0;
141 |   if (saving.value < saveDime) {
142 |     bankCalculator.value[0].saving = saving.value;
143 |     bankCalculator.value[0].ratio = (saving.value / saving.value) * 100;
144 |     bankCalculator.value[0].totalInterest = calculateTotalInterest(
145 |       bankCalculator.value[0]
146 |     );
147 | 
148 |     calculateSumTotalInterest();
149 |   } else {
150 |     remainSaving = saving.value - saveDime;
151 |     bankCalculator.value[0].saving = saveDime;
152 |     bankCalculator.value[0].ratio = (saveDime / saving.value) * 100;
153 |     bankCalculator.value[0].totalInterest = calculateTotalInterest(
154 |       bankCalculator.value[0]
155 |     );
156 | 
157 |     const saveTTBME = 5833;
158 |     if (remainSaving < saveTTBME) {
159 |       bankCalculator.value[1].saving = remainSaving;
160 |       bankCalculator.value[1].ratio = (remainSaving / saving.value) * 100;
161 |       bankCalculator.value[1].totalInterest = calculateTotalInterest(
162 |         bankCalculator.value[1]
163 |       );
164 | 
165 |       calculateSumTotalInterest();
166 |       return;
167 |     } else {
168 |       const saveKKP = 10000;
169 |       if (remainSaving < saveKKP) {
170 |         bankCalculator.value[2].saving = remainSaving;
171 |         bankCalculator.value[2].ratio = (remainSaving / saving.value) * 100;
172 |         bankCalculator.value[2].totalInterest = calculateTotalInterest(
173 |           bankCalculator.value[2]
174 |         );
175 | 
176 |         calculateSumTotalInterest();
177 |         return;
178 |       } else {
179 |         bankCalculator.value[2].saving = saveKKP;
180 |         bankCalculator.value[2].ratio = (saveKKP / saving.value) * 100;
181 |         bankCalculator.value[2].totalInterest = calculateTotalInterest(
182 |           bankCalculator.value[2]
183 |         );
184 |         remainSaving = remainSaving - saveKKP;
185 |         const saveChillD = 100000;
186 |         if (remainSaving < saveChillD) {
187 |           bankCalculator.value[1].saving = remainSaving;
188 |           bankCalculator.value[1].ratio = (remainSaving / saving.value) * 100;
189 |           bankCalculator.value[1].totalInterest = calculateTotalInterest(
190 |             bankCalculator.value[1]
191 |           );
192 | 
193 |           calculateSumTotalInterest();
194 |           return;
195 |         } else {
196 |           bankCalculator.value[3].saving = saveChillD;
197 |           bankCalculator.value[3].ratio = (saveChillD / saving.value) * 100;
198 |           bankCalculator.value[3].totalInterest = calculateTotalInterest(
199 |             bankCalculator.value[3]
200 |           );
201 |           remainSaving = remainSaving - saveChillD;
202 |           const saveTTBMEStep2 = 100000;
203 |           if (remainSaving < saveTTBMEStep2) {
204 |             bankCalculator.value[1].saving = remainSaving;
205 |             bankCalculator.value[1].ratio = (remainSaving / saving.value) * 100;
206 |             bankCalculator.value[1].totalInterest = calculateTotalInterest(
207 |               bankCalculator.value[1]
208 |             );
209 | 
210 |             calculateSumTotalInterest();
211 |             return;
212 |           } else {
213 |             bankCalculator.value[1].saving = saveTTBMEStep2;
214 |             bankCalculator.value[1].ratio =
215 |               (saveTTBMEStep2 / saving.value) * 100;
216 |             bankCalculator.value[1].totalInterest = calculateTotalInterest(
217 |               bankCalculator.value[1]
218 |             );
219 |             remainSaving = remainSaving - saveTTBMEStep2;
220 |             const saveKKPStep2 = 40000;
221 |             if (remainSaving < saveKKPStep2) {
222 |               // bankCalculator.value[4].saving = remainSaving;
223 |               // bankCalculator.value[4].ratio =
224 |               //   (remainSaving / saving.value) * 100;
225 |               // return;
226 |               bankCalculator.value[2].saving =
227 |                 bankCalculator.value[2].saving + remainSaving;
228 |               bankCalculator.value[2].ratio =
229 |                 (remainSaving / saving.value) * 100;
230 |               bankCalculator.value[2].totalInterest = calculateTotalInterest(
231 |                 bankCalculator.value[2]
232 |               );
233 | 
234 |               calculateSumTotalInterest();
235 |               return;
236 |             } else {
237 |               // bankCalculator.value[4].saving = saveKKPStep2;
238 |               // bankCalculator.value[4].ratio =
239 |               //   (saveKKPStep2 / saving.value) * 100;
240 |               // remainSaving = remainSaving - saveKKPStep2;
241 |               bankCalculator.value[2].saving =
242 |                 bankCalculator.value[2].saving + saveKKPStep2;
243 |               bankCalculator.value[2].ratio =
244 |                 (bankCalculator.value[2].saving / saving.value) * 100;
245 |               bankCalculator.value[2].totalInterest = calculateTotalInterest(
246 |                 bankCalculator.value[2]
247 |               );
248 |               remainSaving = remainSaving - saveKKPStep2;
249 |             }
250 |             const saveAlpha = 500000;
251 |             if (remainSaving < saveAlpha) {
252 |               bankCalculator.value[5].saving = remainSaving;
253 |               bankCalculator.value[5].ratio =
254 |                 (bankCalculator.value[5].saving / saving.value) * 100;
255 |               bankCalculator.value[5].totalInterest = calculateTotalInterest(
256 |                 bankCalculator.value[5]
257 |               );
258 | 
259 |               calculateSumTotalInterest();
260 |               return;
261 |             } else {
262 |               bankCalculator.value[5].saving = saveAlpha;
263 |               bankCalculator.value[5].ratio =
264 |                 (bankCalculator.value[5].saving / saving.value) * 100;
265 |               remainSaving = remainSaving - saveAlpha;
266 |               bankCalculator.value[5].totalInterest = calculateTotalInterest(
267 |                 bankCalculator.value[5]
268 |               );
269 |             }
270 |             if (remainSaving < 971000 && canSavingMore2Years.value) {
271 |               bankCalculator.value[6].saving = remainSaving;
272 |               bankCalculator.value[6].ratio =
273 |                 (remainSaving / saving.value) * 100;
274 |               bankCalculator.value[6].totalInterest = calculateTotalInterest(
275 |                 bankCalculator.value[6]
276 |               );
277 | 
278 |               calculateSumTotalInterest();
279 |               return;
280 |             } else {
281 |               const saveHL = 1000000;
282 |               if (remainSaving > saveHL) {
283 |                 bankCalculator.value[7].saving = saveHL;
284 |                 bankCalculator.value[7].ratio = (saveHL / saving.value) * 100;
285 |                 bankCalculator.value[7].totalInterest = calculateTotalInterest(
286 |                   bankCalculator.value[7]
287 |                 );
288 | 
289 |                 remainSaving = remainSaving - saveHL;
290 |               } else {
291 |                 bankCalculator.value[7].saving = remainSaving;
292 |                 bankCalculator.value[7].ratio =
293 |                   (remainSaving / saving.value) * 100;
294 |                 bankCalculator.value[7].totalInterest = calculateTotalInterest(
295 |                   bankCalculator.value[7]
296 |                 );
297 | 
298 |                 calculateSumTotalInterest();
299 |                 return;
300 |               }
301 |               if (canSavingMore2Years.value) {
302 |                 // save to kept
303 |                 bankCalculator.value[6].saving =
304 |                   bankCalculator.value[6].saving + remainSaving;
305 |                 bankCalculator.value[6].ratio =
306 |                   (bankCalculator.value[6].saving / saving.value) * 100;
307 |                 bankCalculator.value[6].totalInterest = calculateTotalInterest(
308 |                   bankCalculator.value[6]
309 |                 );
310 | 
311 |                 calculateSumTotalInterest();
312 |                 return;
313 |               } else {
314 |                 if (remainSaving < 385000) {
315 |                   // save TTBME
316 |                   bankCalculator.value[8].saving = remainSaving;
317 |                   bankCalculator.value[8].ratio =
318 |                     (remainSaving / saving.value) * 100;
319 |                   bankCalculator.value[8].totalInterest =
320 |                     calculateTotalInterest(bankCalculator.value[8]);
321 | 
322 |                   calculateSumTotalInterest();
323 |                   return;
324 |                 } else {
325 |                   // save CIMB Speed D+
326 |                   bankCalculator.value[9].saving = remainSaving;
327 |                   bankCalculator.value[9].ratio =
328 |                     (remainSaving / saving.value) * 100;
329 |                   bankCalculator.value[9].totalInterest =
330 |                     calculateTotalInterest(bankCalculator.value[9]);
331 | 
332 |                   calculateSumTotalInterest();
333 |                   return;
334 |                 }
335 |               }
336 |             }
337 |           }
338 |         }
339 |       }
340 |     }
341 |   }
342 | };
343 | </script>
344 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @font-face {
 6 |   font-family: "LINESeedSans";
 7 |   src: url("/save-smart/font/LINESeedSansTH_W_Rg.woff2") format("woff2");
 8 |   font-weight: normal;
 9 |   font-style: normal;
10 | }
11 | @font-face {
12 |   font-family: "LINESeedSans";
13 |   src: url("/save-smart/font/LINESeedSansTH_W_Bd.woff2") format("woff2");
14 |   font-weight: bold;
15 |   font-style: bold;
16 | }
17 | 
18 | html {
19 |   background-color: #fdfdfd;
20 | }
21 | body {
22 |   font-family: LINESeedSans, sans-serif;
23 | }
24 | 


--------------------------------------------------------------------------------
/components/BMCButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="fixed right-4 bottom-4">
 3 |     <a
 4 |       href="https://www.buymeacoffee.com/songklodS"
 5 |       target="_blank"
 6 |       class="inline-flex p-2 bg-yellow-400 rounded-full"
 7 |     >
 8 |     <IconCoffee class="fill-black" />
 9 |     </a>
10 |   </div>
11 | </template>


--------------------------------------------------------------------------------
/components/BankItem.vue:
--------------------------------------------------------------------------------
 1 | <template v-for="(summary, index) in bankCalculator">
 2 |   <div
 3 |     v-if="index != 4 && (summary.saving > 0 || isShowInput)"
 4 |     class="border border-[#DFDFDF] p-4 bg-white rounded-lg flex gap-3"
 5 |   >
 6 |     <div>
 7 |       <img :src="summary.logo" class="w-10 h-10 rounded-lg" />
 8 |     </div>
 9 |     <div class="flex justify-between flex-1">
10 |       <div class="flex flex-col gap-0.5">
11 |         <div class="flex items-center gap-1 text-sm">
12 |           <p class="font-bold">
13 |             {{ summary.name }}
14 |           </p>
15 |           <div class="hidden min-[375px]:block">
16 |             <span
17 |               class="p-0.5 px-1 rounded-lg text-[10px] font-bold bg-green-300"
18 |             >
19 |               {{ (summary.interest * 100).toFixed(2) }}%
20 |             </span>
21 |           </div>
22 |         </div>
23 |         <p class="text-[#A1A1A1] text-xs">{{ summary.bank }}</p>
24 |       </div>
25 |       <div class="flex flex-col gap-0.5">
26 |         <p class="text-sm font-bold text-right">
27 |           {{
28 |             Intl.NumberFormat("th-TH", {
29 |               style: "currency",
30 |               currency: "THB",
31 |             }).format(summary.saving)
32 |           }}
33 |         </p>
34 |         <p class="text-[#A1A1A1] text-xs text-right">
35 |           <!-- <span> สัดส่วน {{ summary.ratio.toFixed(2) }}% </span> -->
36 |           <span>
37 |             ดอกเบี้ย
38 |             {{
39 |               Intl.NumberFormat("th-TH", {
40 |                 style: "currency",
41 |                 currency: "THB",
42 |               }).format(summary.totalInterest)
43 |             }}
44 |           </span>
45 |         </p>
46 |       </div>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script setup lang="ts">
52 | import { type Bank } from "../interfaces/Bank";
53 | 
54 | defineProps<{
55 |   summary: Bank;
56 |   index: number;
57 |   isShowInput: boolean;
58 | }>();
59 | </script>
60 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="p-2 py-2 sm:py-4 text-center bg-[#2969FF]">
 3 |     <div
 4 |       class="container flex flex-col justify-center gap-1 py-2 pb-4 mx-auto text-center sm:gap-4 sm:flex-row"
 5 |     >
 6 |       <div>
 7 |         <a
 8 |           href="https://www.facebook.com/permalink.php?story_fbid=pfbid07qpqzy8TA8s2qUi1kPYqYZdhsjct2LjJRbb16JRhbt8dnHWsqhAeVxDffskZ538Yl&id=61558121405445&rdid=pc5pJgOCanjpDqzx"
 9 |           target="_blank"
10 |           class="flex items-center justify-center w-full max-w-xs mx-auto text-white"
11 |         >
12 |           <p>
13 |             อ่านโพสต์ต้นฉบับของ
14 |             <br />
15 |             <span class="inline-flex items-center gap-1 text-2xl font-bold">
16 |               <IconFacebook /> เนิร์ดไฟแนนซ์
17 |             </span>
18 |           </p>
19 |         </a>
20 |       </div>
21 |       <div>
22 |         <a
23 |           href="https://www.youtube.com/@codetraveler9432"
24 |           target="_blank"
25 |           class="flex items-center justify-center w-full max-w-xs gap-1 mx-auto text-white"
26 |         >
27 |           <p>
28 |             Developed by
29 |             <br />
30 |             <span class="inline-flex items-center gap-1 text-2xl font-bold">
31 |               <img src="/CodeTraveler.png" class="w-5 h-5" />
32 |               CodeTraveler
33 |             </span>
34 |           </p>
35 |         </a>
36 |       </div>
37 |       <BMCButton />
38 |     </div>
39 |   </footer>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/components/Icon/Coffee.vue:
--------------------------------------------------------------------------------
 1 | <template>   
 2 |   <svg
 3 |     width="24"
 4 |     height="24"
 5 |     viewBox="0 0 24 24"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <g clip-path="url(#clip0_14_242)">
10 |       <path
11 |         d="M4.23528 0.705811C4.42249 0.705811 4.60204 0.78018 4.73442 0.912559C4.86679 1.04494 4.94116 1.22448 4.94116 1.41169C4.94116 2.07522 5.32799 2.4084 6.07058 2.96463L6.12705 3.00699C6.79622 3.50816 7.76469 4.2324 7.76469 5.64699C7.76469 5.8342 7.69032 6.01374 7.55795 6.14612C7.42557 6.2785 7.24602 6.35287 7.05881 6.35287C6.8716 6.35287 6.69206 6.2785 6.55968 6.14612C6.4273 6.01374 6.35293 5.8342 6.35293 5.64699C6.35293 4.98346 5.96611 4.65028 5.22352 4.09405L5.16705 4.05169C4.49787 3.55052 3.5294 2.82628 3.5294 1.41169C3.5294 1.22448 3.60377 1.04494 3.73615 0.912559C3.86853 0.78018 4.04807 0.705811 4.23528 0.705811ZM8.47058 0.705811C8.65779 0.705811 8.83733 0.78018 8.96971 0.912559C9.10209 1.04494 9.17646 1.22448 9.17646 1.41169C9.17646 2.07522 9.56328 2.4084 10.3059 2.96463L10.3623 3.00699C11.0315 3.50816 12 4.2324 12 5.64699C12 5.8342 11.9256 6.01374 11.7932 6.14612C11.6609 6.2785 11.4813 6.35287 11.2941 6.35287C11.1069 6.35287 10.9273 6.2785 10.795 6.14612C10.6626 6.01374 10.5882 5.8342 10.5882 5.64699C10.5882 4.98346 10.2014 4.65028 9.45881 4.09405L9.40234 4.05169C8.73316 3.55052 7.76469 2.82628 7.76469 1.41169C7.76469 1.22448 7.83906 1.04494 7.97144 0.912559C8.10382 0.78018 8.28336 0.705811 8.47058 0.705811ZM13.4118 1.41169C13.4118 1.22448 13.3374 1.04494 13.205 0.912559C13.0726 0.78018 12.8931 0.705811 12.7059 0.705811C12.5187 0.705811 12.3391 0.78018 12.2067 0.912559C12.0744 1.04494 12 1.22448 12 1.41169C12 2.82628 12.9685 3.55052 13.6376 4.05169L13.6941 4.09405C14.4367 4.65028 14.8235 4.98346 14.8235 5.64699C14.8235 5.8342 14.8979 6.01374 15.0303 6.14612C15.1626 6.2785 15.3422 6.35287 15.5294 6.35287C15.7166 6.35287 15.8962 6.2785 16.0285 6.14612C16.1609 6.01374 16.2353 5.8342 16.2353 5.64699C16.2353 4.2324 15.2668 3.50816 14.5976 3.00699L14.5412 2.96463C13.7986 2.4084 13.4118 2.07522 13.4118 1.41169ZM19.0588 9.1764H19.7647C20.7008 9.1764 21.5985 9.54825 22.2604 10.2101C22.9223 10.872 23.2941 11.7698 23.2941 12.7058C23.2941 13.6419 22.9223 14.5396 22.2604 15.2015C21.5985 15.8634 20.7008 16.2352 19.7647 16.2352H18.7666C18.2569 18.0401 17.1112 19.5995 15.5411 20.6253C13.9711 21.6511 12.0828 22.074 10.2252 21.8158C8.36765 21.5577 6.66626 20.6359 5.43545 19.2208C4.20464 17.8058 3.52759 15.993 3.5294 14.1176V9.02252C3.5294 8.32934 4.09269 7.76463 4.78728 7.76463H17.8009C18.4955 7.76463 19.0588 8.32793 19.0588 9.02252V9.1764ZM4.94116 9.1764V14.1176C4.94116 15.8025 5.61049 17.4184 6.8019 18.6098C7.9933 19.8012 9.6092 20.4705 11.2941 20.4705C12.979 20.4705 14.5949 19.8012 15.7863 18.6098C16.9777 17.4184 17.647 15.8025 17.647 14.1176V9.1764H4.94116ZM19.0588 10.5882V14.1176C19.0588 14.3557 19.0485 14.591 19.0278 14.8235H19.7647C20.3263 14.8235 20.865 14.6003 21.2621 14.2032C21.6592 13.8061 21.8823 13.2674 21.8823 12.7058C21.8823 12.1442 21.6592 11.6055 21.2621 11.2084C20.865 10.8113 20.3263 10.5882 19.7647 10.5882H19.0588Z"
12 |       />
13 |     </g>
14 |     <defs>
15 |       <clipPath id="clip0_14_242">
16 |         <rect
17 |           width="22.5882"
18 |           height="22.5882"
19 |           transform="translate(0.705872 0.705811)"
20 |         />
21 |       </clipPath>
22 |     </defs>
23 |   </svg>
24 | </template>


--------------------------------------------------------------------------------
/components/Icon/Facebook.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"></path></svg>
 4 | </template>
 5 | 
 6 | <script lang="ts">
 7 | export default {
 8 |   name: 'IcBaselineFacebook'
 9 | }
10 | </script>


--------------------------------------------------------------------------------
/components/MoneyInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container px-4 mx-auto">
 3 |     <div
 4 |       class="bg-white rounded-lg -mt-20 p-4 flex flex-col gap-4 border border-[#EDEDED]"
 5 |     >
 6 |       <div class="flex flex-col gap-1">
 7 |         <label for="saving" class="text-[#A1A1A1]">จำนวนเงินออม (บาท)</label>
 8 |         <input
 9 |           v-model="saving"
10 |           placeholder="100000"
11 |           type="number"
12 |           class="border border-[#DFDFDF] py-3 px-4 w-full focus:outline-none focus:border-[#2969FF] rounded-lg"
13 |         />
14 |       </div>
15 |       <label
16 |         for="more2years"
17 |         class="flex items-center gap-1 cursor-pointer select-none"
18 |       >
19 |         <input
20 |           id="more2years"
21 |           v-model="canSavingMore2Years"
22 |           type="checkbox"
23 |           class="h-4 w-4 rounded border-gray-300 text-[#2969FF] focus:ring-[#2969FF]"
24 |         />
25 |         สามารถฝากเงินได้เกิน 2 ปี
26 |       </label>
27 |       <button
28 |         class="bg-[#2969FF] py-3 text-white rounded-lg"
29 |         @click="calculate"
30 |       >
31 |         คำนวณ
32 |       </button>
33 |       <!-- <div
34 |         class="text-xs text-[#A1A1A1] bg-[#f5f5f5] p-2 text-center rounded-lg"
35 |       >
36 |         <b>Disclaimer</b>
37 |         ข้อมูลที่ได้จากการคำนวณเป็นเพียงการประมาณการเท่านั้น
38 |       </div> -->
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script setup lang="ts">
44 | const emits = defineEmits(["calculate"]);
45 | const saving = defineModel("saving", { type: Number });
46 | const canSavingMore2Years = defineModel("canSavingMore2Years", {
47 |   type: Boolean,
48 | });
49 | 
50 | function calculate() {
51 |   emits("calculate");
52 | }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/components/ResultDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container px-4 mx-auto">
 3 |     <div
 4 |       class="bg-white rounded-lg -mt-20 p-4 flex flex-col gap-4 border border-[#EDEDED]"
 5 |     >
 6 |       <div class="flex flex-col gap-1">
 7 |         <label for="saving" class="text-[#A1A1A1] text-center"
 8 |           >จำนวนเงินออม</label
 9 |         >
10 |         <h2 class="text-4xl font-bold text-center">
11 |           {{
12 |             Intl.NumberFormat("th-TH", {
13 |               style: "currency",
14 |               currency: "THB",
15 |             }).format(saving)
16 |           }}
17 |         </h2>
18 |       </div>
19 |       <p v-show="!canSavingMore2Years" class="text-center">
20 |         ฝากสั้น ไม่ถึง 2 ปี
21 |       </p>
22 |       <p v-show="canSavingMore2Years" class="text-center">
23 |         ฝากยาว มากกว่า 2 ปี
24 |       </p>
25 |       <button
26 |         class="border border-[#2969FF] py-3 text-[#2969FF] rounded-lg"
27 |         @click="showInput"
28 |       >
29 |         คำนวณใหม่
30 |       </button>
31 |       <div class="text-xs text-[#A1A1A1] bg-[#f5f5f5] p-2 rounded-lg">
32 |         <b>Disclaimer</b>
33 |         ข้อมูลที่ได้จากการคำนวณเป็นเพียงการประมาณการเท่านั้น
34 |       </div>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script setup lang="ts">
40 | defineProps<{
41 |   saving: number;
42 |   canSavingMore2Years: boolean;
43 |   isShowInput: boolean;
44 | }>();
45 | 
46 | const emits = defineEmits(["showInput"]);
47 | 
48 | function showInput() {
49 |   emits("showInput");
50 | }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/data/banks.ts:
--------------------------------------------------------------------------------
  1 | import type { Bank } from "~/interfaces/Bank";
  2 | 
  3 | export const banks : Bank[] = [
  4 |   {
  5 |     //0
  6 |     logo: "/save-smart/bank/Dime.png",
  7 |     name: "Dime! Save",
  8 |     bank: "เกียรตินาคิน",
  9 |     saving: 0,
 10 |     ratio: 0,
 11 |     interest: 3 / 100,
 12 |     totalInterest: 0,
 13 |   },
 14 |   {
 15 |     //1
 16 |     logo: "/save-smart/bank/TTB-ME-Save.png",
 17 |     name: "TTB ME Save",
 18 |     bank: "ธนาคารทหารไทยธนชาต",
 19 |     saving: 0,
 20 |     ratio: 0,
 21 |     interest: 2.2 / 100,
 22 |     totalInterest: 0,
 23 |   },
 24 |   {
 25 |     //2
 26 |     logo: "/save-smart/bank/KKP-Start-Saving.png",
 27 |     name: "KKP Start Saving",
 28 |     bank: "ธนาคารเกียรตินาคินภัทร",
 29 |     saving: 0,
 30 |     ratio: 0,
 31 |     interest: 2.2 / 100,
 32 |     totalInterest: 0,
 33 |   },
 34 |   {
 35 |     //3
 36 |     logo: "/save-smart/bank/Chill-D.png",
 37 |     name: "CIMB Chill-D",
 38 |     bank: "ธนาคาร ซีไอเอ็มบี ไทย",
 39 |     saving: 0,
 40 |     ratio: 0,
 41 |     interest: 2.21 / 100,
 42 |     totalInterest: 0,
 43 |   },
 44 |   {
 45 |     //4
 46 |     logo: "/save-smart/bank/KKP-Start-Saving.png",
 47 |     name: "KKP Start Saving",
 48 |     bank: "ธนาคารเกียรตินาคินภัทร",
 49 |     saving: 0,
 50 |     ratio: 0,
 51 |     interest: 2 / 100,
 52 |     totalInterest: 0,
 53 |   },
 54 |   {
 55 |     //5
 56 |     logo: "/save-smart/bank/Alpha-Saving.png",
 57 |     name: "Alpha Saving",
 58 |     bank: "ธนาคารไทยเครดิต",
 59 |     saving: 0,
 60 |     ratio: 0,
 61 |     interest: 2 / 100,
 62 |     totalInterest: 0,
 63 |   },
 64 |   {
 65 |     //6
 66 |     logo: "/save-smart/bank/Kept.png",
 67 |     name: "Kept",
 68 |     bank: "ธนาคารกรุงศรีอยุธยา",
 69 |     saving: 0,
 70 |     ratio: 0,
 71 |     interest: 1.87 / 100,
 72 |     totalInterest: 0,
 73 |   },
 74 |   {
 75 |     //7
 76 |     logo: "/save-smart/bank/LH-B-You Wealth.png",
 77 |     name: "LH B-You Wealth",
 78 |     bank: "ธนาคารแลนด์ แอนด์ เฮ้าส์",
 79 |     saving: 0,
 80 |     ratio: 0,
 81 |     interest: 1.87 / 100,
 82 |     totalInterest: 0,
 83 |   },
 84 |   {
 85 |     //8
 86 |     logo: "/save-smart/bank/TTB-ME-Save.png",
 87 |     name: "TTB ME Save",
 88 |     bank: "ธนาคารทหารไทยธนชาต",
 89 |     saving: 0,
 90 |     ratio: 0,
 91 |     interest: 1.6 / 100,
 92 |     totalInterest: 0,
 93 |   },
 94 |   {
 95 |     //9
 96 |     logo: "/save-smart/bank/CIMB-Speed D+.png",
 97 |     name: "CIMB Speed D+",
 98 |     bank: "ธนาคาร ซีไอเอ็มบี ไทย",
 99 |     saving: 0,
100 |     ratio: 0,
101 |     interest: 1.66 / 100,
102 |     totalInterest: 0,
103 |   },
104 | ];
105 | 


--------------------------------------------------------------------------------
/interfaces/Bank.ts:
--------------------------------------------------------------------------------
 1 | export interface Bank {
 2 |   logo: string;
 3 |   name: string;
 4 |   bank: string;
 5 |   saving: number;
 6 |   ratio: number;
 7 |   interest: number;
 8 |   totalInterest: number;
 9 | }
10 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: "2024-04-03",
 4 |   devtools: { enabled: true },
 5 |   css: ["~/assets/css/main.css"],
 6 |   ssr: false,
 7 |   app: {
 8 |     baseURL: "/save-smart",
 9 |     buildAssetsDir: "assets",
10 |     head: {
11 |       title: "SaveSmart-เนิร์ดไฟแนนซ์ x CodeTraveler",
12 |       link: [
13 |         {
14 |           rel: "icon",
15 |           type: "image/png",
16 |           href: "/save-smart/favicon.ico",
17 |         },
18 |       ],
19 |     },
20 |   },
21 | 
22 |   postcss: {
23 |     plugins: {
24 |       tailwindcss: {},
25 |       autoprefixer: {},
26 |     },
27 |   },
28 | 
29 |   modules: ["@nuxt/image", "nuxt-gtag"],
30 |   gtag: {
31 |     id: "G-3NB3NLPLSJ",
32 |   },
33 | });
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "test:unit": "vitest",
 9 |     "generate": "nuxt generate",
10 |     "preview": "nuxt preview",
11 |     "postinstall": "nuxt prepare",
12 |     "deploy": "gh-pages --dotfiles -d .output/public"
13 |   },
14 |   "dependencies": {
15 |     "@nuxt/image": "^1.7.0",
16 |     "nuxt": "^3.12.3",
17 |     "nuxt-gtag": "^2.0.7",
18 |     "vue": "latest"
19 |   },
20 |   "devDependencies": {
21 |     "@nuxt/test-utils": "^3.13.1",
22 |     "@vue/test-utils": "^2.4.6",
23 |     "autoprefixer": "^10.4.19",
24 |     "gh-pages": "^6.1.1",
25 |     "postcss": "^8.4.39",
26 |     "tailwindcss": "^3.4.6",
27 |     "vitest": "^2.0.3"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/public/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/.nojekyll


--------------------------------------------------------------------------------
/public/CodeTraveler.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/CodeTraveler.png


--------------------------------------------------------------------------------
/public/bank/Alpha-Saving.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/Alpha-Saving.png


--------------------------------------------------------------------------------
/public/bank/CIMB-Speed D+.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/CIMB-Speed D+.png


--------------------------------------------------------------------------------
/public/bank/Chill-D.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/Chill-D.png


--------------------------------------------------------------------------------
/public/bank/Dime.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/Dime.png


--------------------------------------------------------------------------------
/public/bank/KKP-Start-Saving.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/KKP-Start-Saving.png


--------------------------------------------------------------------------------
/public/bank/Kept.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/Kept.png


--------------------------------------------------------------------------------
/public/bank/LH-B-You Wealth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/LH-B-You Wealth.png


--------------------------------------------------------------------------------
/public/bank/TTB-ME-Save.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/bank/TTB-ME-Save.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/favicon.ico


--------------------------------------------------------------------------------
/public/font/LINESeedSansTH_W_Bd.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/font/LINESeedSansTH_W_Bd.woff2


--------------------------------------------------------------------------------
/public/font/LINESeedSansTH_W_He.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/font/LINESeedSansTH_W_He.woff2


--------------------------------------------------------------------------------
/public/font/LINESeedSansTH_W_Rg.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/font/LINESeedSansTH_W_Rg.woff2


--------------------------------------------------------------------------------
/public/font/LINESeedSansTH_W_Th.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/font/LINESeedSansTH_W_Th.woff2


--------------------------------------------------------------------------------
/public/font/LINESeedSansTH_W_XBd.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/font/LINESeedSansTH_W_XBd.woff2


--------------------------------------------------------------------------------
/public/other/flowchart.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itoon/save-smart/f57d54fa90748582c696e275c6f210dd097e5bd6/public/other/flowchart.jpg


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./components/**/*.{js,vue,ts}",
 5 |     "./layouts/**/*.vue",
 6 |     "./pages/**/*.vue",
 7 |     "./plugins/**/*.{js,ts}",
 8 |     "./app.vue",
 9 |     "./error.vue",
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineVitestConfig } from "@nuxt/test-utils/config";
2 | 
3 | export default defineVitestConfig({
4 |   // any custom Vitest config you require
5 | });
6 | 


--------------------------------------------------------------------------------