feat: init data & simple UI

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.env.example

@@ -0,0 +1,37 @@
+# -----------------------------------------------------------------------------
+# App
+# -----------------------------------------------------------------------------
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+SKIP_ENV_VALIDATION=false # Set to true to disable env validation
+
+#-----------------------------------------------------------------------------------------------
+# NextAuth
+#-----------------------------------------------------------------------------------------------
+# You can generate a new secret on the command line with:
+# openssl rand -base64 32
+#-----------------------------------------------------------------------------------------------
+AUTH_URL=http://localhost:3000
+AUTH_SECRET=
+
+#-----------------------------------------------------------------------------------------------
+# Google Credentials
+#-----------------------------------------------------------------------------------------------
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
+
+#-----------------------------------------------------------------------------------------------
+# Github Credentials
+#-----------------------------------------------------------------------------------------------
+AUTH_GITHUB_ID=
+AUTH_GITHUB_SECRET=
+
+#-----------------------------------------------------------------------------------------------
+# Discord Credentials
+#-----------------------------------------------------------------------------------------------
+AUTH_DISCORD_ID=
+AUTH_DISCORD_SECRET=
+
+#-----------------------------------------------------------------------------------------------
+# Database
+#-----------------------------------------------------------------------------------------------
+DATABASE_URL=

.eslintrc.cjs

@@ -0,0 +1,55 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  extends: [
+    "eslint:recommended",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+  ],
+  plugins: [
+    "eslint-plugin-react-compiler",
+    "tailwindcss",
+    "@typescript-eslint",
+  ],
+  rules: {
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "warn",
+    "@next/next/no-html-link-for-pages": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      { prefer: "type-imports" },
+    ],
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        checksVoidReturn: {
+          attributes: false,
+        },
+      },
+    ],
+  },
+  settings: {
+    tailwindcss: {
+      callees: ["cn", "cva"],
+      config: "tailwind.config.ts",
+    },
+    next: {
+      rootDir: ["./"],
+    },
+  },
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
+
+module.exports = config;

.github/workflows/ci.yml

@@ -0,0 +1,37 @@
+name: CI
+
+on: [push, pull_request, workflow_dispatch]
+
+jobs:
+  build:
+    name: Run Type Check, Linters & Tests
+    runs-on: ubuntu-latest
+
+    env:
+      SKIP_ENV_VALIDATION: true
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun i
+
+      - name: Check types
+        run: bun run type-check
+
+      - name: Check linting
+        run: bun run lint
+
+      - name: Run tests
+        run: bun test
+
+      - name: Check commits messages
+        uses: wagoid/commitlint-github-action@v6

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.husky/commit-msg

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+bunx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+bunx lint-staged

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hemant Rajput
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# Sao ke tu thien Viet nam

app/TransactionTable.tsx

@@ -0,0 +1,180 @@
+// import React, { useMemo, useState } from "react";
+
+import { Row } from "./row";
+
+// import {
+//   Column,
+//   ColumnDef,
+//   usePagination,
+//   useReactTable,
+// } from "@tanstack/react-table";
+// import { format, isWithinInterval, parseISO } from "date-fns";
+// import { z } from "zod";
+
+// import { Row } from "./row";
+
+// // React component
+// const TransactionTable: React.FC = ({
+//   allRowData,
+// }: {
+//   allRowData: Array<Row>;
+// }) => {
+//   const [data, setData] = useState<Row[]>(allRowData); // All data in state
+//   const [searchTerm, setSearchTerm] = useState("");
+//   const [dateRange, setDateRange] = useState<{
+//     startDate: string;
+//     endDate: string;
+//   }>({
+//     startDate: "",
+//     endDate: "",
+//   });
+//   const [pageIndex, setPageIndex] = useState(0);
+//   const [pageSize] = useState(100); // Max 100 rows per page
+
+//   const [filteredData, setFilteredData] = useState<Row[]>(allRowData);
+
+//   // Function to trigger search on button click
+//   const handleSearch = () => {
+//     const filteredBySearch = data.filter((row) =>
+//       row.DocNo.toLowerCase().includes(searchTerm.toLowerCase()),
+//     );
+
+//     if (dateRange.startDate && dateRange.endDate) {
+//       const dateFiltered = filteredBySearch.filter((row) => {
+//         const txnDate = parseISO(row.TNXDate);
+//         const startDate = parseISO(dateRange.startDate);
+//         const endDate = parseISO(dateRange.endDate);
+//         return isWithinInterval(txnDate, { start: startDate, end: endDate });
+//       });
+//       setFilteredData(dateFiltered);
+//     } else {
+//       setFilteredData(filteredBySearch);
+//     }
+//   };
+
+//   const columns: ColumnDef<Row>[] = useMemo(
+//     () => [
+//       { accessorKey: "id", header: "ID" },
+//       { accessorKey: "TNXDate", header: "TXN Date" },
+//       { accessorKey: "DocNo", header: "Doc No" },
+//       { accessorKey: "Debit", header: "Debit" },
+//       { accessorKey: "Credit", header: "Credit" },
+//       { accessorKey: "Balance", header: "Balance" },
+//       {
+//         accessorKey: "Transactions in Detail",
+//         header: "Transactions in Detail",
+//       },
+//     ],
+//     [],
+//   );
+
+//   const {
+//     getTableProps,
+//     getTableBodyProps,
+//     headerGroups,
+//     rows,
+//     prepareRow,
+//     page,
+//     canNextPage,
+//     canPreviousPage,
+//     nextPage,
+//     previousPage,
+//     pageOptions,
+//     setPageSize,
+//     state: { pageIndex: tablePageIndex, pageSize: tablePageSize },
+//   } = useReactTable(
+//     {
+//       columns,
+//       data: filteredData,
+//       initialState: { pageIndex: 0, pageSize: 100 }, // Starting with 100 rows per page
+//     },
+//     usePagination,
+//   );
+
+//   return (
+//     <div>
+//       {/* Search and Date Range Filters */}
+//       <div>
+//         <input
+//           type="text"
+//           placeholder="Search Doc No..."
+//           value={searchTerm}
+//           onChange={(e) => setSearchTerm(e.target.value)}
+//         />
+//         <input
+//           type="date"
+//           value={dateRange.startDate}
+//           onChange={(e) =>
+//             setDateRange({ ...dateRange, startDate: e.target.value })
+//           }
+//         />
+//         <input
+//           type="date"
+//           value={dateRange.endDate}
+//           onChange={(e) =>
+//             setDateRange({ ...dateRange, endDate: e.target.value })
+//           }
+//         />
+//         <button onClick={handleSearch}>Search</button> {/* Trigger search */}
+//       </div>
+
+//       {/* Table */}
+//       <table {...getTableProps()} style={{ width: "100%", marginTop: "10px" }}>
+//         <thead>
+//           {headerGroups.map((headerGroup) => (
+//             <tr {...headerGroup.getHeaderGroupProps()}>
+//               {headerGroup.headers.map((column) => (
+//                 <th {...column.getHeaderProps()}>{column.render("Header")}</th>
+//               ))}
+//             </tr>
+//           ))}
+//         </thead>
+//         <tbody {...getTableBodyProps()}>
+//           {page.map((row) => {
+//             prepareRow(row);
+//             return (
+//               <tr {...row.getRowProps()}>
+//                 {row.cells.map((cell) => (
+//                   <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
+//                 ))}
+//               </tr>
+//             );
+//           })}
+//         </tbody>
+//       </table>
+
+//       {/* Pagination Controls */}
+//       <div>
+//         <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+//           Previous
+//         </button>
+//         <span>
+//           Page{" "}
+//           <strong>
+//             {tablePageIndex + 1} of {pageOptions.length}
+//           </strong>
+//         </span>
+//         <button onClick={() => nextPage()} disabled={!canNextPage}>
+//           Next
+//         </button>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default TransactionTable;
+
+export default function TransactionTable({ allRows }: { allRows: Array<Row> }) {
+  return (
+    <div>
+      {allRows.slice(0, 10).map((row, i) => {
+        return (
+          <div key={i}>
+            {row.TNXDate} - {row.DocNo} - {row.Debit} - {row.Credit} -{" "}
+            {row.Balance} - {row["Transactions in Detail"]}
+          </div>
+        );
+      })}
+    </div>
+  );
+}