Website Aplikasi Jajan
Explore the docs »
View Demo on Vercel
·
Report Bug
Project ini di-bootstrap menggunakan create-vue. Menggunakan framework vuejs dan bundler vite, serta typescript. Secara lengka menggunakan konfigurasi sebagai berikut:
Ditambah dengan Vuex sebagai state management
assets
(berisimain.css
-> global css)components
(berisiExpenseForm
danExpenseCard
)router
(berisi konfigurasivue-router
)store
(berisi state management file)types
(berisi type definition)utils
(berisicurrency
dandate
yang menggunakan Intl sebagai formatting template, danfetcher
untuk call API menggunakanfetch
)view
(berisiHomeView
dengan utils groupItem yang mengubah response API menjadi group berdasarkan bulan dan tanggal)
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint
import type { Expense } from "@/types/Expense";
import { getMonthName } from "@/utils/date";
export function groupExpense(items: Expense[]) {
const data = items.reduce((acc, item) => {
const year = new Date(item.tanggal).getFullYear();
const month = getMonthName(new Date(item.tanggal).getMonth() + 1);
const my = `${month} ${year}`;
const date = item.tanggal;
if (!acc[my]) acc[my] = {};
if (!acc[my][date]) acc[my][date] = [];
acc[my][date].push(item);
return acc;
}, {} as Record<string, Record<string, Expense[]>>);
const total = Object.keys(data).reduce((acc, month) => {
acc[month] = Object.keys(data[month]).reduce((acc, date) => {
acc += data[month][date].reduce((acc, item) => {
acc += item.pengeluaran;
return acc;
}, 0);
return acc;
}, 0);
return acc;
}, {} as Record<string, number>);
return { data, total };
}
const formatDate = (value: Date) =>
new Intl.DateTimeFormat("id-ID", {
year: "numeric",
month: "long",
day: "numeric",
}).format(value);
const formatTime = (value: Date) =>
new Intl.DateTimeFormat("id-ID", {
hour: "2-digit",
minute: "2-digit",
}).format(value);
const formatCurrency = (value: number) => {
return new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
maximumFractionDigits: 0,
}).format(value);
};