feat(FE-337): init slicing UI and define data types

src/app/finance/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import FinanceTable from '@/components/pages/finance/FinanceTable';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { FinanceApi } from '@/services/api/finance';
+import useSWR from 'swr';
+
+const Finance = () => {
+  const { data: finances, isLoading: isLoadingFinances } = useSWR(
+    `${FinanceApi.basePath}`,
+    () => FinanceApi.getAllFetcher()
+  );
+
+  if (isLoadingFinances) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  return (
+    <section className='size-full p-4'>
+      <h1>Finance</h1>
+      <FinanceTable
+        finances={isResponseSuccess(finances) ? finances.data : []}
+      />
+    </section>
+  );
+};
+
+export default Finance;