11 | {children}
12 |
13 | );
14 | };
15 |
16 | export default TooltipWrapper;
17 |
--------------------------------------------------------------------------------
/src/components/dls/Modal/ModalOverlay.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 |
3 | type Props = {
4 | onClick?: () => void;
5 | className?: string;
6 | };
7 |
8 | const ModalOverlay = ({ onClick, className }: Props) => {
9 | return (
10 |
17 | );
18 | };
19 |
20 | export default ModalOverlay;
21 |
--------------------------------------------------------------------------------
/src/components/icons/CheckIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from "@/types/IconProps";
2 |
3 | const CheckIcon = (props: IconProps) => {
4 | return (
5 |
17 | );
18 | };
19 |
20 | export default CheckIcon;
21 |
--------------------------------------------------------------------------------
/src/components/icons/XmarkIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from "@/types/IconProps";
2 |
3 | const XmarkIcon = (props: IconProps) => {
4 | return (
5 |
17 | );
18 | };
19 |
20 | export default XmarkIcon;
21 |
--------------------------------------------------------------------------------
/src/components/Container/Container.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 |
4 | type ContainerProps = {
5 | children: React.ReactNode;
6 | className?: string;
7 | };
8 |
9 | const Container = ({ children, className }: ContainerProps) => {
10 | return (
11 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export default Container;
23 |
--------------------------------------------------------------------------------
/src/components/dls/Form/FormGroup.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | type Props = {
4 | children: React.ReactNode;
5 | // eslint-disable-next-line no-unused-vars
6 | onSubmit: (e: React.FormEvent
10 |
11 | {title}
12 |
13 |
17 | );
18 |
19 | export default ChartHeader;
20 |
--------------------------------------------------------------------------------
/src/types/IconProps.ts:
--------------------------------------------------------------------------------
1 | export interface IconProps {
2 | className?: string | undefined;
3 | fill?: string;
4 | stroke?: string;
5 | strokeWidth?: number;
6 | width?: number;
7 | height?: number;
8 | }
9 |
10 | export interface ArrowIconProps extends IconProps {
11 | direction: 'up' | 'down' | 'left' | 'right';
12 | }
13 |
14 | export const defaultIconProps: IconProps = {
15 | fill: 'currentColor',
16 | }
17 |
18 | export const defaultOutlineIconProps: IconProps = {
19 | fill: 'none',
20 | stroke: 'currentColor',
21 | strokeWidth: 1.5,
22 | }
--------------------------------------------------------------------------------
/src/components/icons/PlusIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from "@/types/IconProps";
2 | import React from "react";
3 |
4 | const PlusIcon = (props: IconProps) => {
5 | return (
6 |
18 | );
19 | };
20 |
21 | export default PlusIcon;
22 |
--------------------------------------------------------------------------------
/src/types/Routes.ts:
--------------------------------------------------------------------------------
1 | export enum Routes {
2 | App = "/app",
3 | Dashboard = "/app/dashboard",
4 | Wallet = "/app/wallet",
5 | Transactions = "/app/transactions",
6 | Account = "/app/account",
7 | Auth = "/auth",
8 | Login = "/auth/login",
9 | Register = "/auth/register",
10 | Home = "/",
11 | Demo = "/demo",
12 | DashboardDemo = "/demo/dashboard",
13 | WalletDemo = "/demo/wallet",
14 | TransactionsDemo = "/demo/transactions",
15 | AccountDemo = "/demo/account",
16 | ForgotPassword = "/auth/forgot-password",
17 | About = "/about",
18 | }
19 |
--------------------------------------------------------------------------------
/src/types/Transaction.ts:
--------------------------------------------------------------------------------
1 | export interface Transaction {
2 | _id: string;
3 | walletId?: string;
4 | amount: number;
5 | description: string;
6 | note: string;
7 | type: string;
8 | createdAt: string;
9 | updatedAt: string;
10 | // category?: string;
11 | }
12 |
13 | export interface TransactionByDate {
14 | date: string;
15 | transactions: Transaction[];
16 | }
17 |
18 | export interface TotalTransactionByDay {
19 | _id: {
20 | day: number;
21 | };
22 | timestamp: string;
23 | in: number;
24 | out: number;
25 | totalAmount: number;
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/AuthCard/AuthCardContent.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 |
4 | type Props = {
5 | children: React.ReactNode;
6 | className?: string;
7 | };
8 |
9 | const AuthCardContent = ({ children, className }: Props) => {
10 | return (
11 |
14 | {children}
15 |
16 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export default AuthCardContent;
23 |
--------------------------------------------------------------------------------
/src/components/icons/UserIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from '@/types/IconProps'
2 | import React from 'react'
3 |
4 |
5 | const UserIcon = (props: IconProps) => {
6 | return (
7 |
10 |
11 | )
12 | }
13 |
14 | export default UserIcon
--------------------------------------------------------------------------------
/src/components/Charts/ChartPlaceholder.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | type Props = {
4 | message: string;
5 | };
6 |
7 | const ChartPlaceholder = ({ message }: Props) => {
8 | return (
9 |
10 | {message}
11 |
12 | );
13 | };
14 |
15 | export const ChartLoading = () => (
16 |
10 |
11 | {title}
12 |
13 | {children && (
14 |
19 | );
20 |
21 | export default DashboardHeader;
22 |
--------------------------------------------------------------------------------
/src/components/Placeholder/index.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 |
4 | type Props = {
5 | className: string;
6 | animationDelay?: number;
7 | };
8 |
9 | const Placeholder = ({ className, animationDelay = 0 }: Props) => {
10 | return (
11 |
20 | );
21 | };
22 |
23 | export default Placeholder;
24 |
--------------------------------------------------------------------------------
/src/app/app/account/MyAccount.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import DangerZone from "../../../components/Account/DangerZone";
4 | import DevicesLists from "../../../components/Account/DeviceLists";
5 | import Profile from "../../../components/Account/Profile";
6 | import ThemeSelection from "../../../components/ThemeSelection/ThemeSelection";
7 |
8 | const MyAccount = () => {
9 | return (
10 |
15 | {children}
16 |
17 | )}
18 |
11 |
16 | );
17 | };
18 |
19 | export default MyAccount;
20 |
--------------------------------------------------------------------------------
/src/components/Container/ContentWrapper.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 |
4 | type Props = {
5 | className?: string;
6 | children: React.ReactNode;
7 | };
8 |
9 | const ContentWrapper = ({ className, children }: Props) => {
10 | return (
11 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export default ContentWrapper;
23 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowRectangleIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from '@/types/IconProps'
2 | import React from 'react'
3 |
4 |
5 | const ArrowRectangleIcon = (props: IconProps) => {
6 | return (
7 |
10 |
11 | )
12 | }
13 |
14 | export default ArrowRectangleIcon
--------------------------------------------------------------------------------
/src/components/dls/Divider/index.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 |
4 | type Props = {
5 | vertical?: boolean;
6 | horizontal?: boolean;
7 | className?: string;
8 | };
9 |
10 | const Divider = ({ vertical, horizontal, className }: Props) => {
11 | return (
12 |
24 | );
25 | };
26 |
27 | export default Divider;
28 |
--------------------------------------------------------------------------------
/src/components/dls/ActionWrapper/OnHoverWrapper.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames'
2 | import React from 'react'
3 |
4 | type OnHoverWrapper = {
5 | children: React.ReactNode
6 | className?: string
7 | }
8 |
9 | const OnHoverWrapper = ({
10 | children,
11 | className
12 | }: OnHoverWrapper) => {
13 | return (
14 |
15 | {children}
16 |
17 | )
18 | }
19 |
20 | export default OnHoverWrapper
--------------------------------------------------------------------------------
/src/app/auth/login/page.tsx:
--------------------------------------------------------------------------------
1 | import LoginComponent from "./LoginComponent";
2 |
3 | export const metadata = {
4 | title: "Login",
5 | description: "Login to your Finaki account",
6 | };
7 |
8 | const jsonLd = {
9 | "@context": "https://schema.org",
10 | "@type": "WebPage",
11 | name: "Login | Finaki",
12 | description: "Login to your Finaki account",
13 | };
14 |
15 | const LoginPage = () => {
16 | return (
17 | <>
18 |
22 |
26 | {children}
27 |
28 | );
29 | };
30 |
31 | export default IconWrapper;
32 |
--------------------------------------------------------------------------------
/src/components/icons/MoonIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from "@/types/IconProps";
2 | import React from "react";
3 |
4 | const MoonIcon = (props: IconProps) => {
5 | return (
6 |
18 | );
19 | };
20 |
21 | export default MoonIcon;
22 |
--------------------------------------------------------------------------------
/src/components/Analytics/ga.tsx:
--------------------------------------------------------------------------------
1 | import Script from "next/script";
2 | import React from "react";
3 |
4 | const GoogleAnalytics = () => {
5 | if (process.env.NODE_ENV !== "production") return <>;
6 | return (
7 | <>
8 |
12 |
21 |
22 | );
23 | };
24 |
25 | export default GoogleAnalytics;
26 |
--------------------------------------------------------------------------------
/src/components/dls/Image/index.tsx:
--------------------------------------------------------------------------------
1 | import { default as Img } from "next/image";
2 |
3 | type Props = {
4 | src: string;
5 | alt: string;
6 | className: string;
7 | priority?: boolean;
8 | sizes?: string;
9 | };
10 |
11 | const Image = ({ src, alt, className, priority, sizes }: Props) => {
12 | return (
13 |
14 |
26 | );
27 | };
28 |
29 | export default Image;
30 |
--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 |
15 | 
24 |
25 | {date}
16 |17 | {currencyFormat(payload[0].value)} 18 |
19 |
20 |
21 | {children}
22 |
23 |
24 | );
25 | };
26 |
27 | export default ChartWrapper;
28 |
--------------------------------------------------------------------------------
/src/components/icons/SunIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultOutlineIconProps, IconProps } from "@/types/IconProps";
2 | import React from "react";
3 |
4 | const SunIcon = (props: IconProps) => {
5 | return (
6 |
18 | );
19 | };
20 |
21 | export default SunIcon;
22 |
--------------------------------------------------------------------------------
/src/utils/api/types/AuthAPI.ts:
--------------------------------------------------------------------------------
1 | import { GenericResponse } from "./Api";
2 |
3 | export interface RegisterInput {
4 | name: string;
5 | email: string;
6 | password: string;
7 | }
8 |
9 | export interface LoginInput {
10 | email: string;
11 | password: string;
12 | }
13 |
14 | export interface RefreshTokenResponse extends GenericResponse {
15 | data: {
16 | accessToken: string;
17 | };
18 | }
19 |
20 | export interface LoginResponse extends GenericResponse {
21 | data: {
22 | accessToken: string;
23 | };
24 | }
25 |
26 | export interface LogoutResponse extends GenericResponse {
27 | data: null;
28 | }
29 |
30 | export interface ResetPasswordInput {
31 | token: string;
32 | password: string;
33 | }
34 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 |
3 | const withPWA = require("@ducanh2912/next-pwa").default({
4 | dest: "public",
5 | });
6 | const nextConfig = {
7 | async redirects() {
8 | return [
9 | {
10 | source: '/app',
11 | destination: '/app/dashboard',
12 | permanent: true,
13 | },
14 | {
15 | source: '/auth',
16 | destination: '/auth/login',
17 | permanent: true,
18 | },
19 | {
20 | source: '/demo',
21 | destination: '/demo/dashboard',
22 | permanent: true,
23 | }
24 | ]
25 | },
26 | experimental: {
27 | appDir: true,
28 | },
29 | }
30 |
31 | module.exports = withPWA({
32 | ...nextConfig
33 | })
34 |
--------------------------------------------------------------------------------
/src/app/app/transactions/ExportPDF.tsx:
--------------------------------------------------------------------------------
1 | import ExportTransactionModal from "../../../components/Transactions/ExportTransactionModal";
2 | import Button from "../../../components/dls/Button/Button";
3 | import { useState } from "react";
4 |
5 | const ExportPDF = () => {
6 | const [isOpen, setIsOpen] = useState17 | {payload[0].name} 18 |
19 |{currencyFormat(payload[0].value)}
20 |
9 |
16 | Ups! Ada yang salah
17 |
18 |
22 | Kembali ke Dashboard
23 |
24 |
25 | );
26 | };
27 |
28 | export default NotFound;
29 |
--------------------------------------------------------------------------------
/src/components/dls/Hamburger/Hamburger.module.scss:
--------------------------------------------------------------------------------
1 | label.hamburgerMenu {
2 | display: flex;
3 | flex-direction: column;
4 | width: 30px;
5 | cursor: pointer;
6 | }
7 | label.hamburgerMenu span {
8 | border-radius: 10px;
9 | height: 3px;
10 | margin: 3px 0;
11 | transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
12 | }
13 |
14 | .hamburgerMenu span:nth-child(1) {
15 | width: 50%;
16 | }
17 |
18 | .hamburgerMenu span:nth-child(2) {
19 | width: 100%;
20 | }
21 |
22 | .hamburgerMenu span:nth-child(3) {
23 | width: 75%;
24 | }
25 |
26 | span.st {
27 | transform-origin: bottom;
28 | transform: rotatez(45deg) translate(3px, 0.2px);
29 | }
30 |
31 | span.nd {
32 | transform-origin: top;
33 | transform: rotatez(-45deg);
34 | }
35 |
36 | span.rd {
37 | transform-origin: bottom;
38 | width: 50%;
39 | transform: translate(7px, -7px) rotatez(45deg);
40 | }
--------------------------------------------------------------------------------
/src/utils/api/user.ts:
--------------------------------------------------------------------------------
1 | import { instance } from "./api";
2 | import { UserDevicesResponse, UserResponse } from "./types/UserAPI";
3 |
4 | export const getUserData = async () => {
5 | const response = await instance.get
31 | {children}
32 |
33 | );
34 | };
35 |
36 | export default ChartContainer;
37 |
--------------------------------------------------------------------------------
/src/components/dls/Form/Checkbox/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React, { forwardRef } from "react";
3 |
4 | interface Props extends React.HTMLAttributes
20 |
27 |
30 |
31 | );
32 | });
33 |
34 | export default Checkbox;
35 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowIcon.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowIconProps, defaultOutlineIconProps } from "@/types/IconProps";
2 | import classNames from "classnames";
3 |
4 | const ArrowIcon = ({ direction, className, ...props }: ArrowIconProps) => {
5 | return (
6 |
27 | );
28 | };
29 |
30 | export default ArrowIcon;
31 |
--------------------------------------------------------------------------------
/src/components/ThemeSelection/ThemeToggleIcon.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import IconButton from "../dls/IconButton";
4 | import MoonIcon from "../icons/MoonIcon";
5 | import SunIcon from "../icons/SunIcon";
6 | import { Theme } from "@/types/Theme";
7 | import useHydration from "../../hooks/useHydration";
8 | import useTheme from "../../hooks/useTheme";
9 |
10 | const ThemeToggleIcon = () => {
11 | const { colorTheme, setColorTheme } = useTheme();
12 | const hydrated = useHydration();
13 |
14 | function toggleTheme() {
15 | if (colorTheme === Theme.Light) {
16 | setColorTheme(Theme.Dark);
17 | } else {
18 | setColorTheme(Theme.Light);
19 | }
20 | }
21 |
22 | if (!hydrated) return <>;
23 | return (
24 |
11 |
26 |
12 |
16 | Masuk
17 |
18 |
19 |
23 | Keluar
24 |
25 |
14 |
21 | Ups! Ada yang salah
22 |
23 |
27 | Kembali ke Home
28 |
29 |
30 | );
31 | };
32 |
33 | export default NotFound;
34 |
--------------------------------------------------------------------------------
/src/components/dls/TextWithIcon/index.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 | import Heading from "../Heading";
4 |
5 | type TextWithIconProps = {
6 | iconPosition?: "left" | "right";
7 | icon: React.ReactNode;
8 | children: React.ReactNode;
9 | className?: string;
10 | };
11 |
12 | const TextWithIcon = ({
13 | iconPosition = "left",
14 | icon,
15 | className,
16 | children,
17 | }: TextWithIconProps) => {
18 | return (
19 |
25 | {iconPosition === "left" &&
27 | {children}
28 |
29 | {iconPosition === "right" &&
31 | );
32 | };
33 |
34 | export default TextWithIcon;
35 |
--------------------------------------------------------------------------------
/src/components/icons/TrashIcon.tsx:
--------------------------------------------------------------------------------
1 | import { defaultIconProps, IconProps } from '@/types/IconProps'
2 | import React from 'react'
3 |
4 |
5 | const TrashIcon = ({ ...props }: IconProps) => {
6 | return (
7 |
10 |
11 | )
12 | }
13 |
14 | export default TrashIcon
--------------------------------------------------------------------------------
/src/components/dls/IconButton/index.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 | import IconWrapper from "../IconWrapper";
4 |
5 | interface Props extends React.ButtonHTMLAttributes{icon}
}
26 | {icon}
}
30 |
32 | {children}
33 |
34 | );
35 | };
36 |
37 | export default DashboardContentWrapper;
38 |
--------------------------------------------------------------------------------
/src/components/ThemeSelection/ThemeOption.tsx:
--------------------------------------------------------------------------------
1 | import Image from "../dls/Image";
2 | import classNames from "classnames";
3 | import React from "react";
4 |
5 | type ThemeOptionProps = {
6 | active: boolean;
7 | src: string;
8 | alt: string;
9 | className?: string;
10 | onClick: () => void;
11 | };
12 |
13 | const ThemeOption = ({ active, src, alt, onClick }: ThemeOptionProps) => {
14 | return (
15 |
23 |
31 | );
32 | };
33 |
34 | export default ThemeOption;
35 |
--------------------------------------------------------------------------------
/public/app.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "theme_color": "#e7e5e4",
3 | "background_color": "#FFF",
4 | "display": "standalone",
5 | "scope": "/",
6 | "start_url": "/app",
7 | "name": "Finaki",
8 | "description": "Finaki adalah aplikasi manajemen keuangan all-in-one, yang memungkinkan Anda untuk mengatur pengeluaran, pendapatan, dan tabungan dengan mudah dan efisien.",
9 | "short_name": "Finaki",
10 | "icons": [
11 | {
12 | "src": "/icon-192x192.png",
13 | "sizes": "192x192",
14 | "type": "image/png"
15 | },
16 | {
17 | "src": "/icon-256x256.png",
18 | "sizes": "256x256",
19 | "type": "image/png"
20 | },
21 | {
22 | "src": "/icon-384x384.png",
23 | "sizes": "384x384",
24 | "type": "image/png"
25 | },
26 | {
27 | "src": "/icon-512x512.png",
28 | "sizes": "512x512",
29 | "type": "image/png"
30 | }
31 | ]
32 | }
--------------------------------------------------------------------------------
/src/components/AuthCard/AuthCard.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React from "react";
3 | import Image from "../dls/Image";
4 |
5 | type Props = {
6 | children: React.ReactNode;
7 | imageUrl?: string;
8 | imageAlt?: string;
9 | className?: string;
10 | };
11 |
12 | const AuthCard = ({ children, className, imageUrl, imageAlt }: Props) => {
13 | return (
14 |
20 | {imageUrl && (
21 |
31 | );
32 | };
33 |
34 | export default AuthCard;
35 |
--------------------------------------------------------------------------------
/src/components/Header/ProfileInfo/index.tsx:
--------------------------------------------------------------------------------
1 | import IconWrapper from "../../dls/IconWrapper";
2 | import LoadingSpinner from "../../dls/Loading/LoadingSpinner";
3 | import ChevronIcon from "../../icons/ChevronIcon";
4 | import useStore from "../../../stores/store";
5 | import Action from "./Action";
6 |
7 | const ProfileInfo = () => {
8 | const { user } = useStore((state) => ({ user: state.user }));
9 |
10 | if (!user) return
13 |
14 | Hi, {user?.name.split(" ")[0]}
15 |
16 |
17 |
24 |
26 | );
27 | };
28 |
29 | export default ProfileInfo;
30 |
--------------------------------------------------------------------------------
/src/components/dls/Loading/LoadingSpinner.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface Props {
4 | className?: string;
5 | }
6 |
7 | const LoadingSpinner = ({ className }: Props) => {
8 | return (
9 |
38 | );
39 | };
40 |
41 | export default LoadingSpinner;
42 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "paths": {
18 | "@/icons/*": ["src/components/icons/*"],
19 | "@/types/*": ["src/types/*"],
20 | "@/api/*": ["src/utils/api/*"],
21 | "@/dls/*": ["src/components/dls/*"],
22 | "@/components/*": ["src/components/*"],
23 | "@/utils/*": ["src/utils/*"],
24 | "@/data/*": ["src/data/*"],
25 | },
26 | "plugins": [
27 | {
28 | "name": "next"
29 | }
30 | ],
31 | "baseUrl": ".",
32 | },
33 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
34 | "exclude": ["node_modules"]
35 | }
36 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/utils/api/types/TransactionAPI.ts:
--------------------------------------------------------------------------------
1 | import { TotalTransactionByDay, Transaction } from "@/types/Transaction";
2 | import { GenericResponse } from "./Api";
3 |
4 | export enum Interval {
5 | // Daily = "daily",
6 | Weekly = "weekly",
7 | Monthly = "monthly"
8 | }
9 |
10 | export interface TransactionResponse extends GenericResponse {
11 | data: Transaction;
12 | }
13 |
14 | export interface TransactionsResponse extends GenericResponse {
15 | data: Transaction[];
16 | }
17 |
18 | export interface InfiniteTransactionResponse extends GenericResponse {
19 | data: {
20 | transactions: Transaction[];
21 | totalPages: number;
22 | currentPage: number;
23 | };
24 | }
25 |
26 | export interface TotalTransactionByDayResponse extends GenericResponse {
27 | data: TotalTransactionByDay[];
28 | }
29 |
30 | export interface TransactionInput {
31 | walletId?: string;
32 | description: string;
33 | amount: number;
34 | type: string;
35 | note: string;
36 | }
37 |
38 | export interface EditTransactionInput {
39 | id: string;
40 | transactionInput: TransactionInput;
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowCircleIcon.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowIconProps, defaultIconProps } from '@/types/IconProps'
2 | import classNames from 'classnames'
3 | import React from 'react'
4 |
5 | const ArrowCircleIcon = ({
6 | fill = 'currentColor',
7 | direction,
8 | className,
9 | }: ArrowIconProps) => {
10 | return (
11 |
27 |
28 | )
29 | }
30 |
31 | export default ArrowCircleIcon
--------------------------------------------------------------------------------
/src/components/dls/Modal/Modal.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useState } from "react";
2 |
3 | type ModalProps = {
4 | children: React.ReactNode;
5 | defaultOpen?: boolean;
6 | stateOpen?: boolean;
7 | onClose?: () => void;
8 | };
9 |
10 | export const ModalContext = createContext
12 |
31 | );
32 | };
33 |
34 | export default Page;
35 |
--------------------------------------------------------------------------------
/src/components/Navigation/HomeNav/HomeNavLink.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import Link from "next/link";
3 | import React from "react";
4 |
5 | type Props = {
6 | href: string;
7 | children: React.ReactNode;
8 | isActive: boolean;
9 | type?: "primary" | "secondary";
10 | className?: string;
11 | };
12 |
13 | const HomeNavLink = ({
14 | children,
15 | isActive,
16 | href,
17 | type = "primary",
18 | className,
19 | }: Props) => {
20 | return (
21 |
37 | {children}
38 |
39 | );
40 | };
41 |
42 | export default HomeNavLink;
43 |
--------------------------------------------------------------------------------
/src/components/Navigation/AppNav/AppNavLink.tsx:
--------------------------------------------------------------------------------
1 | import IconWrapper from "../../dls/IconWrapper";
2 | import classNames from "classnames";
3 | import Link from "next/link";
4 | import React from "react";
5 |
6 | type NavLinkProps = {
7 | href: string;
8 | children: React.ReactNode;
9 | icon: React.ReactNode;
10 | active?: boolean;
11 | };
12 |
13 | const AppNavLink = ({ href, children, icon, active = false }: NavLinkProps) => {
14 | return (
15 |
16 |
13 | Login untuk melihat profile anda
14 |
15 |
19 | Daftar
20 |
21 |
25 | Masuk
26 |
27 |
28 |
29 |
29 | {icon}
30 | {children}
31 |
32 |
33 | );
34 | };
35 |
36 | export default AppNavLink;
37 |
--------------------------------------------------------------------------------
/src/components/Charts/PieChart/PieLabel.tsx:
--------------------------------------------------------------------------------
1 | const renderPieLabel = (props: any) => {
2 | const { payload } = props;
3 | let orderedPayload = payload.sort(
4 | (a: any, b: any) => b.payload.percent - a.payload.percent
5 | );
6 |
7 | if (orderedPayload.length > 6) {
8 | orderedPayload = orderedPayload.slice(0, 5);
9 | const other = orderedPayload.reduce((acc: any, curr: any) => {
10 | return acc + curr.payload.percent;
11 | }, 0);
12 |
13 | orderedPayload.push({
14 | value: "Lainnya",
15 | color: "#57C5B6",
16 | payload: {
17 | percent: 1 - other,
18 | },
19 | });
20 | }
21 |
22 | return (
23 | -
24 | {orderedPayload.map((entry: any, index: number) => {
25 | const percent = ((entry.payload.percent || 0) * 100).toFixed(1);
26 | return (
27 |
- 28 | 29 | {percent}% 30 | 31 | {entry.value} 32 | 33 | ); 34 | })} 35 |
32 | setSelected({
33 | value,
34 | label: children as string,
35 | })
36 | }
37 | role="listitem"
38 | {...props}
39 | >
40 | {children}
41 |
42 | );
43 | };
44 |
45 | export default Option;
46 |
--------------------------------------------------------------------------------
/src/app/auth/layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Routes } from "@/types/Routes";
4 | import { usePathname, useRouter } from "next/navigation";
5 | import React, { useEffect } from "react";
6 | import {GoogleOAuthProvider} from "@react-oauth/google";
7 |
8 | type Props = {
9 | children: React.ReactNode;
10 | };
11 |
12 | const AuthLayout = ({ children }: Props) => {
13 | const router = useRouter();
14 | const pathname = usePathname();
15 |
16 | const registerPage = pathname.includes(Routes.Register);
17 | const loginPage = pathname.includes(Routes.Login);
18 |
19 | // redirect to app if already logged in or has access token
20 | useEffect(() => {
21 | const accessToken = window.localStorage.getItem("access-token");
22 |
23 | // redirect if on register or login page, otherwise do nothing
24 | if (accessToken && (registerPage || loginPage)) {
25 | router.push(Routes.App);
26 | }
27 | // eslint-disable-next-line react-hooks/exhaustive-deps
28 | }, []);
29 |
30 | return (
31 | {children}
33 |
29 | {user?.telegramAccount?.username && (
30 | mutate()}
36 | className="font-bold"
37 | />
38 | )}
39 |
40 | );
41 | };
42 |
43 | export default DangerZone;
44 |
--------------------------------------------------------------------------------
/src/components/dls/Dropdown/DropdownMenu.tsx:
--------------------------------------------------------------------------------
1 | import * as RadixDropdown from "@radix-ui/react-dropdown-menu";
2 |
3 | interface Props {
4 | trigger: React.ReactNode;
5 | children: React.ReactNode;
6 | align?: "start" | "center" | "end";
7 | // eslint-disable-next-line no-unused-vars
8 | onOpenChange?: (open: boolean) => void;
9 | sideOffset?: number;
10 | alignOffset?: number;
11 | }
12 |
13 | const DropdownMenu = ({
14 | trigger,
15 | children,
16 | align = "end",
17 | sideOffset = -5,
18 | alignOffset = -15,
19 | onOpenChange,
20 | }: Props) => {
21 | return (
22 | {trigger}
25 |
22 | {iconTrigger && (
23 |
27 | {iconTrigger}
24 | )}
25 | {trigger}
26 | Welcome to Finaki repository 👋
2 | 3 |  4 | 5 |Financial record website created with NextJS. 6 |
7 | 8 |9 | Try it now! 10 |
11 | 12 | ## 💵 About 13 | A web-based application created to solve financial recording solutions, Finaki was created so that users can record finances anywhere and anytime. 14 | 15 | ## ✨ Features 16 | - 💳 Authentication 17 | - Login 18 | - Register 19 | - Forgot Password 20 | - Logout 21 | - 📝 CRUD 22 | - Transaction 23 | - Wallet 24 | - 😎 Dark Mode 25 | - 👮 Security 26 | - JWT 27 | - Password Hashing 28 | - 🤙 Responsive UI 29 | - 📱 PWA 30 | - 🏫 Export Transaction to PDF 31 | 32 | 33 | ## 🚀 Tech Stack 34 | - Front end 35 | - [NextJS](https://nextjs.org/) 36 | - [ReactJS](https://reactjs.org/) 37 | - [TypeScript](https://www.typescriptlang.org/) 38 | - [React Query](https://react-query.tanstack.com/) 39 | - [Tailwind CSS](https://tailwindcss.com/) 40 | - Back end 41 | - [ExpressJS](https://expressjs.com/) 42 | - [MongoDB](https://www.mongodb.com/) 43 | 44 | 45 | ## ⚖️ License 46 | Distributed under the MIT License. See `LICENSE` for more information. 47 | -------------------------------------------------------------------------------- /src/components/icons/GearIcon.tsx: -------------------------------------------------------------------------------- 1 | import {IconProps} from '@/types/IconProps' 2 | import React from 'react' 3 | 4 | const GearIcon = ({ 5 | ...props 6 | }: IconProps) => { 7 | return ( 8 | 11 | ) 12 | 13 | } 14 | 15 | export default GearIcon -------------------------------------------------------------------------------- /src/components/dls/Form/Radio/RadioButton.tsx: -------------------------------------------------------------------------------- 1 | import IconWrapper from "../../IconWrapper"; 2 | import classNames from "classnames"; 3 | import { forwardRef, InputHTMLAttributes, Ref } from "react"; 4 | 5 | interface Props extends InputHTMLAttributes
28 |
29 | Tema
30 |
31 |
32 | setColorTheme(Theme.Light)}
35 | active={colorTheme === Theme.Light}
36 | />
37 | setColorTheme(Theme.Dark)}
40 | active={colorTheme === Theme.Dark}
41 | />
42 |
43 |
44 | );
45 | };
46 |
47 | export default ThemeSelection;
48 |
--------------------------------------------------------------------------------
/src/components/WalletCard/constants.ts:
--------------------------------------------------------------------------------
1 | export type WalletColor =
2 | | "blue"
3 | | "orange"
4 | | "green"
5 | | "red"
6 | | "purple"
7 | | "yellow"
8 | | "gray"
9 | | "cyan";
10 |
11 | export const walletColors = {
12 | blue: "from-blue-400 to-blue-600",
13 | orange: "from-orange-400 to-orange-600",
14 | green: "from-green-400 to-green-600",
15 | red: "from-red-400 to-red-600",
16 | purple: "from-purple-400 to-purple-600",
17 | yellow: "from-yellow-400 to-yellow-600",
18 | gray: "from-gray-400 to-gray-600",
19 | cyan: "from-cyan-400 to-cyan-600",
20 | };
21 |
22 | export const indicatorColor = {
23 | blue: "#3b82f6",
24 | orange: "#f97316",
25 | green: "#22c55e",
26 | red: "#ef4444",
27 | purple: "#a855f7",
28 | yellow: "#eab308",
29 | gray: "#6b7280",
30 | cyan: "#06b6d4",
31 | };
32 |
33 | export const hashCodeColor = {
34 | blue: "#3b82f6",
35 | orange: "#f97316",
36 | green: "#22c55e",
37 | red: "#ef4444",
38 | purple: "#a855f7",
39 | yellow: "#eab308",
40 | gray: "#6b7280",
41 | cyan: "#06b6d4",
42 | };
43 |
44 | export const walletLabelColor = {
45 | blue: "bg-blue-200 text-blue-700",
46 | orange: "bg-orange-200 text-orange-700",
47 | green: "bg-green-200 text-green-700",
48 | red: "bg-red-200 text-red-700",
49 | purple: "bg-purple-200 text-purple-700",
50 | yellow: "bg-yellow-200 text-yellow-700",
51 | gray: "bg-gray-200 text-gray-700",
52 | cyan: "bg-cyan-200 text-cyan-700",
53 | };
54 |
--------------------------------------------------------------------------------
/src/utils/api/types/WalletAPI.ts:
--------------------------------------------------------------------------------
1 | import { BalanceHistory, WalletData } from "@/types/Wallet";
2 | import { GenericRequest, GenericResponse } from "./Api";
3 |
4 | export interface WalletInput {
5 | name: string;
6 | balance?: number;
7 | color: string;
8 | isCredit: boolean;
9 | }
10 |
11 | export interface CreatedWalletResponse extends GenericResponse {
12 | data: WalletData;
13 | }
14 |
15 | export interface UpdateWalletRequest {
16 | id: string;
17 | data: WalletInput;
18 | }
19 |
20 | export interface UpdatedWalletResponse extends GenericResponse {
21 | data: WalletData;
22 | }
23 |
24 | export interface AllWalletResponse {
25 | data: WalletData[];
26 | }
27 |
28 | export interface WalletResponse extends GenericResponse {
29 | data: WalletData;
30 | }
31 |
32 | export interface UpdatedWalletColorResponse extends GenericResponse {
33 | data: {
34 | _id: string;
35 | color: string;
36 | };
37 | }
38 |
39 | export interface DeleteWalletRequest extends GenericRequest {
40 | param: {
41 | id: string;
42 | };
43 | query: {
44 | deleteTransactions: boolean;
45 | };
46 | }
47 |
48 | export interface WalletBalanceActivityResponse extends GenericResponse {
49 | data: BalanceHistory[];
50 | }
51 |
52 | export interface WalletDetailsResponse extends GenericResponse {
53 | data: WalletData;
54 | }
55 |
56 | export interface TransferBalance {
57 | sourceWallet: string;
58 | destinationWallet: string;
59 | amount: number;
60 | }
61 |
--------------------------------------------------------------------------------
/src/app/demo/transactions/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import TransactionHeader from "../../../components/Transactions/AllTransactions/TransactionHeader";
4 | import TransactionList from "../../../components/Transactions/AllTransactions/TransactionList";
5 | import Heading from "../../../components/dls/Heading";
6 | import { QueryKey } from "@/types/QueryKey";
7 | import { Transaction } from "@/types/Transaction";
8 | import { groupByDay } from "@/utils/array";
9 | import { useQuery } from "@tanstack/react-query";
10 | import Head from "next/head";
11 |
12 | const TransactionsPage = () => {
13 | const { data, isLoading } = useQuery({
14 | queryKey: [QueryKey.TRANSACTIONS],
15 | queryFn: (): Promise24 | {transactionData.date} 25 |
26 | 0 }
31 | )}
32 | >
33 |
33 |
40 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/Charts/BarChart/BarTooltip.tsx:
--------------------------------------------------------------------------------
1 | import { currencyFormat } from "@/utils/currencyFormat";
2 | import { COLOR } from "../constant";
3 | import TooltipWrapper from "../TooltipWrapper";
4 |
5 | const renderBarTooltip = ({ active, payload }: any) => {
6 | if (active) {
7 | const date = new Date(payload[0]?.payload.timestamp).toLocaleDateString(
8 | "id-ID",
9 | {
10 | day: "numeric",
11 | month: "short",
12 | }
13 | );
14 | return (
15 | {date}
17 |
18 |
22 |
23 | {currencyFormat(payload[0].value)}
24 |
25 |
26 |
27 |
31 |
32 | {currencyFormat(payload[1].value)}
33 |
34 |
35 | {/* {date}
36 |{`Rp. ${payload[0].value}`}
*/} 37 |
37 |
45 |
46 | {error && (
47 |
51 | {error.message}
52 |
53 | )}
54 |
55 | );
56 | }
57 | );
58 |
59 | export default TextArea;
60 |
--------------------------------------------------------------------------------
/src/components/dls/Modal/ModalContent.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import React, { useContext } from "react";
3 | import { ModalContext } from "./Modal";
4 | import ModalOverlay from "./ModalOverlay";
5 |
6 | type Props = {
7 | children: React.ReactNode;
8 | closeOnOverlayClick?: boolean;
9 | className?: string;
10 | onClickOverlay?: () => void;
11 | };
12 |
13 | const ModalContent = ({
14 | children,
15 | closeOnOverlayClick,
16 | className,
17 | onClickOverlay,
18 | }: Props) => {
19 | const { isOpen, close } = useContext(ModalContext);
20 | return (
21 |
28 | {
31 | if (closeOnOverlayClick) {
32 | close();
33 | }
34 | onClickOverlay && onClickOverlay();
35 | }}
36 | />
37 |
48 | );
49 | };
50 |
51 | export default ModalContent;
52 |
--------------------------------------------------------------------------------
/src/components/dls/Heading/index.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 |
3 | type HeadingTextProps = {
4 | children: React.ReactNode;
5 | className?: string;
6 | fontWeight?: "normal" | "medium" | "bold" | "extrabold";
7 | isItalic?: boolean;
8 | isUnderline?: boolean;
9 | defaultColor?: "bright" | "dark";
10 | level: 1 | 2 | 3 | 4 | 5 | 6;
11 | gradient?: boolean
12 | };
13 |
14 | const Heading = ({
15 | children,
16 | className,
17 | defaultColor = "dark",
18 | level,
19 | fontWeight = "bold",
20 | isItalic = false,
21 | isUnderline = false,
22 | gradient = false
23 | }: HeadingTextProps) => {
24 | return (
25 |
45 | {isOpen && children}
46 |
47 |
49 | {children}
50 |
51 | );
52 | };
53 |
54 | export default Heading;
55 |
--------------------------------------------------------------------------------
/src/components/dls/Tooltip/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
4 | import classNames from "classnames";
5 | import * as React from "react";
6 |
7 | const TooltipTrigger = TooltipPrimitive.Trigger;
8 |
9 | const TooltipContent = React.forwardRef<
10 | React.ElementRef{content}
38 |
10 |
11 |
12 | About this project
13 |
14 |
20 |
21 | - Background
22 |
23 |
29 |
30 |
31 | - Technology
32 |
33 |
40 |
41 |
42 | );
43 | };
44 |
45 | export default AboutPage;
46 |
--------------------------------------------------------------------------------
/src/components/Navigation/AppNav/AppNav.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { usePathname } from "next/navigation";
4 |
5 | import ArrowsIcon from "../../icons/ArrowsIcon";
6 | import GridIcon from "../../icons/GridIcon";
7 | import UserIcon from "../../icons/UserIcon";
8 | import WalletIcon from "../../icons/WalletIcon";
9 | import { defaultIconProps } from "@/types/IconProps";
10 | import { Routes } from "@/types/Routes";
11 | import AppNavLink from "./AppNavLink";
12 |
13 | const AppNav = () => {
14 | const pathname = usePathname();
15 |
16 | return (
17 |
47 | );
48 | };
49 |
50 | export default AppNav;
51 |
--------------------------------------------------------------------------------
/src/components/Navigation/AppNav/DemoNav.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { usePathname } from "next/navigation";
4 |
5 | import ArrowsIcon from "../../icons/ArrowsIcon";
6 | import GridIcon from "../../icons/GridIcon";
7 | import UserIcon from "../../icons/UserIcon";
8 | import WalletIcon from "../../icons/WalletIcon";
9 | import { defaultIconProps } from "@/types/IconProps";
10 | import { Routes } from "@/types/Routes";
11 | import AppNavLink from "./AppNavLink";
12 |
13 | const DemoNav = () => {
14 | const pathname = usePathname();
15 |
16 | return (
17 |
47 | );
48 | };
49 |
50 | export default DemoNav;
51 |
--------------------------------------------------------------------------------
/src/components/dls/Form/InputWithLabel.module.scss:
--------------------------------------------------------------------------------
1 | // .inputWithLabelWrapper{
2 | // Disable this line because the module.scss file is not working with the darkmode and change the color in the global.scss file
3 |
4 |
5 | // position: relative;
6 |
7 | // label {
8 | // @apply text-gray-500;
9 | // position: absolute;
10 | // left: 30px;
11 | // top: 50%;
12 | // transform: translateY(-50%);
13 | // padding: 0 5px;
14 | // transition: all 0.2s ease-in-out;
15 | // }
16 |
17 | // input{
18 | // @apply bg-gray-100;
19 | // transition: all 0.2s ease-in-out;
20 | // &:focus + label {
21 | // @apply bg-white dark:bg-slate-900;
22 | // top: 0 !important;
23 | // left: 20px;
24 | // }
25 |
26 | // &:not(:placeholder-shown) + label {
27 | // @apply bg-white;
28 | // top: 0 !important;
29 | // left: 20px;
30 |
31 | // }
32 |
33 | // &::placeholder {
34 | // color: transparent;
35 | // }
36 |
37 | // &:focus::placeholder {
38 | // @apply text-gray-400;
39 | // transition-delay: 100ms;
40 | // }
41 |
42 | // &:not(:placeholder-shown){
43 | // @apply bg-white;
44 | // @apply ring-1 ring-gray-300 invalid:ring-pink-400;
45 | // }
46 |
47 | // &:not(:placeholder-shown) ~ .toggleHide {
48 | // display: block;
49 | // }
50 |
51 | // &:focus{
52 | // @apply bg-white ring-2 ring-blue-400;
53 | // }
54 |
55 | // &:focus:not(:placeholder-shown){
56 | // @apply ring-2 ring-blue-400 ;
57 | // }
58 | // }
59 |
60 | // .toggleHide{
61 | // @apply text-gray-500;
62 | // display: none;
63 | // position: absolute;
64 | // right: 20px;
65 | // top: 50%;
66 | // transform: translateY(-50%);
67 | // cursor: pointer;
68 | // }
69 | // }
--------------------------------------------------------------------------------
/src/components/dls/Form/CurrencyInput.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | import { currencyFormat } from "@/utils/currencyFormat";
3 | import { forwardRef, useState } from "react";
4 | import InputWithLabel from "./InputWithLabel";
5 |
6 | type Props = {
7 | placeholder: string;
8 | label?: string;
9 | id: string;
10 | prefixSymbol?: string;
11 | error?: any;
12 | className?: string;
13 | required?: boolean;
14 | minLength?: number;
15 | defaultValue?: string;
16 | onChange?: (e: React.ChangeEvent15 | Finaki is a web-based application for your financial management, you 16 | can record incoming and outgoing transactions. Equipped with graphs to 17 | make it easier for you to analyze your finances. 18 |
19 |24 | This application was created to assist me in recording incoming or 25 | outgoing finances so that they are more precisely controlled, and 26 | can be analyzed. 27 |
28 |34 | This application is made with Typescript on the frontend and 35 | backend. The frontend is built with NextJS and TailwindCSS, and the 36 | backed is built with ExpressJS. For security this application is 37 | equipped with JWT (JSON Web Token). 38 |
39 |
33 |
44 |
34 |
41 | setOpen(true)}>
35 | Tambah Transaksi
36 |
40 |
37 |
39 |
13 |
14 | Riwayat Transaksi
15 |
16 |
30 | );
31 |
32 | return (
33 |
17 | {Array(3)
18 | .fill("")
19 | .map((_, index) => (
20 |
27 | ))}
28 |
29 |
34 |
35 | Riwayat Transaksi
36 |
37 |
56 | );
57 | };
58 |
59 | export default WalletTransaction;
60 |
--------------------------------------------------------------------------------
/src/components/Charts/PieChart/PieChart.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Cell, Legend, Pie, PieChart as PiChart, Tooltip } from "recharts";
4 | import { ChartLoading } from "../ChartPlaceholder";
5 | import ChartWrapper from "../ChartWrapper";
6 | import { PIE_CHART } from "../constant";
7 | import renderPieLabel from "./PieLabel";
8 | import renderPieTooltip from "./PieTooltip";
9 |
10 | export type PieChartData = {
11 | name: string;
12 | value: number;
13 | color: string;
14 | };
15 |
16 | type Props = {
17 | data: PieChartData[];
18 | legend?: boolean;
19 | loading?: boolean;
20 | };
21 |
22 | const PieChart = ({ data, legend = true, loading }: Props) => {
23 | return (
24 |
38 | {props.transactions.length > 0 ? (
39 | props.transactions?.map((transaction, index) => {
40 | return (
41 |
55 |
51 | Tidak ada transaksi
52 |
53 | )}
54 |
61 | Belum ada Dompet yang ditambahkan
62 |
63 | )}
64 |
48 | Loading...
49 |
50 | );
51 | }
52 |
53 | return (
54 | <>
55 |
58 | {children}
60 |
61 |
45 |
65 | );
66 | };
67 |
68 | export default DashboardComponent;
69 |
--------------------------------------------------------------------------------
/src/components/Charts/BarChart/BarChart.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {TotalTransactionByDay} from "@/types/Transaction";
4 | import classNames from "classnames";
5 | import {Bar, BarChart as BaChart, CartesianGrid, Tooltip, XAxis,} from "recharts";
6 | import {ChartError, ChartLoading} from "../ChartPlaceholder";
7 | import ChartWrapper from "../ChartWrapper";
8 |
9 | import renderBarTooltip from "./BarTooltip";
10 | import useTransaction from "../../../stores/transactionStore";
11 | import {shallow} from "zustand/shallow";
12 | import {Interval} from "@/api/types/TransactionAPI";
13 |
14 | type Props = {
15 | data: TotalTransactionByDay[];
16 | className?: string;
17 | color: any;
18 | size?: "medium" | "large";
19 | loading?: boolean;
20 | };
21 |
22 | const BarChart = ({ data, color, loading, className }: Props) => {
23 | const interval = useTransaction(state => state.interval, shallow)
24 | const barSize = interval === Interval.Weekly ? 8 :4
25 |
26 | return (
27 |
54 |
64 |
39 |
54 |
55 | {error && (
56 |
57 | {error.message}
58 |
59 | )}
60 | {type === "password" && (
61 |
63 | setIsPasswordVisible((currentState) => !currentState)
64 | }
65 | className={"toggleHide"}
66 | >
67 |
69 | )}
70 |
71 | );
72 | }
73 | );
74 |
75 | export default InputWithLabel;
76 |
--------------------------------------------------------------------------------
/src/stores/transactionStore.ts:
--------------------------------------------------------------------------------
1 | import {Transaction} from "@/types/Transaction";
2 | import {create} from "zustand";
3 | import {Interval} from "@/api/types/TransactionAPI";
4 |
5 | interface TransactionStore {
6 | transactionDetailState: {
7 | isOpen: boolean;
8 | transaction?: Transaction;
9 | };
10 | setTransactionDetailState: ({
11 | isOpen,
12 | transaction,
13 | }: {
14 | isOpen: boolean;
15 | transaction?: Transaction;
16 | }) => void;
17 | interval: Interval;
18 | setInterval: (val: Interval) => void;
19 | transactions: Transaction[];
20 | setTransactions: (transactions: Transaction[]) => void;
21 | dispatchUpdateTransaction: (id: string, newTransaction: Transaction) => void;
22 | dispatchDeleteTransaction: (id: string) => void;
23 | dispatchAddTransaction: (transaction: Transaction) => void;
24 | pushTransactions: (transactions: Transaction[]) => void;
25 | }
26 |
27 | const useTransaction = create
47 | Sekarang ini anda sedang dalam akun Demo
48 |
52 | Daftar Sekarang
53 |
54 | Untuk menggunakan seluruh fitur
55 |
56 |
59 | {children}
61 |
62 |
45 |
65 | );
66 | };
67 |
68 | export default Page;
69 |
--------------------------------------------------------------------------------
/src/components/Dashboard/RecentTrasactions.tsx:
--------------------------------------------------------------------------------
1 | import { Routes } from "@/types/Routes";
2 | import { Transaction } from "@/types/Transaction";
3 | import Link from "next/link";
4 | import { ChartError } from "../Charts/ChartPlaceholder";
5 | import {
6 | SimpleTransactionItem,
7 | SimpleTSkeleton,
8 | } from "../Transactions/TransactionItem";
9 | import DashboardContentWrapper from "./DashboardContentWrapper";
10 | import DashboardHeader from "./DashboardHeader";
11 |
12 | type Props = {
13 | data: Transaction[] | undefined;
14 | isLoading: boolean;
15 | isError: boolean;
16 | };
17 |
18 | const RecentTransactions = ({ data, isLoading, isError }: Props) => {
19 | if (isLoading || isError) {
20 | return (
21 |
54 |
64 |
24 | {isLoading &&
25 | Array(4)
26 | .fill("")
27 | .map((_, index) => (
28 |
33 | -
54 | {slicedData.map((transaction, index) => {
55 | return (
56 |
66 | Belum ada transaksi
67 |
68 | )}
69 |
50 |
65 | {sortedData.map((device, index) => (
66 |
76 |
77 | );
78 | };
79 |
80 | export default DevicesLists;
81 |
--------------------------------------------------------------------------------
/src/app/demo/wallet/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Placeholder from "../../../components/Placeholder";
4 | import AddNewWallet from "../../../components/WalletCard/AddNewWallet";
5 | import WalletCard from "../../../components/WalletCard/WalletCard";
6 | import WalletCardSkeleton from "../../../components/WalletCard/WalletCardSkeleton";
7 | import { QueryKey } from "@/types/QueryKey";
8 | import { WalletData } from "@/types/Wallet";
9 | import { currencyFormat } from "@/utils/currencyFormat";
10 | import { useQuery } from "@tanstack/react-query";
11 |
12 | const AllWalletsPage = () => {
13 | const { data, isLoading } = useQuery({
14 | queryKey: [QueryKey.WALLETS],
15 | queryFn: (): Promise
51 |
52 | Daftar Perangkat
53 |
54 |
64 |
26 |
42 | );
43 | }
44 |
45 | const totalBalance = data.reduce(
46 | (acc: number, curr: any) => acc + curr.balance,
47 | 0
48 | );
49 |
50 | return (
51 |
27 |
41 |
28 |
35 |
29 |
30 | Total saldo
31 |
32 |
34 |
36 |
40 |
52 |
74 | );
75 | };
76 |
77 | export default AllWalletsPage;
78 |
--------------------------------------------------------------------------------
/src/components/Charts/AreaChart/AreaChart.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import classNames from "classnames";
4 | import {
5 | AreaChart as ArChart,
6 | Area,
7 | CartesianGrid,
8 | Tooltip,
9 | XAxis,
10 | } from "recharts";
11 | import { ChartError, ChartLoading } from "../ChartPlaceholder";
12 | import ChartWrapper from "../ChartWrapper";
13 | import renderAreaTooltip from "./AreaTooltip";
14 | import { stopColor } from "./constants";
15 |
16 | export type AreaChartData = {
17 | day?: string;
18 | timestamp: string;
19 | value: number;
20 | };
21 |
22 | type Props = {
23 | chartName?: string;
24 | data: AreaChartData[];
25 | size?: "medium" | "large";
26 | theme?: "default" | "transparent";
27 | xAxis?: boolean;
28 | horizonalLines?: boolean;
29 | loading?: boolean;
30 | };
31 |
32 | const AreaChart = ({
33 | data,
34 | size = "large",
35 | theme = "default",
36 | xAxis = true,
37 | horizonalLines = true,
38 | loading,
39 | }: Props) => {
40 | return (
41 |
53 |
61 |
54 |
55 | Total saldo
56 |
57 | {currencyFormat(totalBalance)}
58 |
59 |
62 | {data.map((wallet: any) => (
63 |
73 |
23 |
24 | Informasi tentang akun
25 |
26 |
27 |
62 |
63 | Akun Telegram yang terhubung
64 |
65 |
80 |
81 | );
82 | };
83 |
84 | export default Profile;
85 |
--------------------------------------------------------------------------------
/src/components/dls/Dropdown/DropdownItem.tsx:
--------------------------------------------------------------------------------
1 | import CheckIcon from "../../icons/CheckIcon";
2 | import {
3 | CheckboxItem,
4 | Item,
5 | ItemIndicator,
6 | SubTrigger,
7 | } from "@radix-ui/react-dropdown-menu";
8 | import classNames from "classnames";
9 |
10 | import styles from "./DropdownItem.module.scss";
11 | import React from "react";
12 |
13 | interface ItemProps extends React.ComponentProps
28 | Nama
29 | {user?.name}
30 |
31 |
32 | Email
33 | {user?.email}
34 |
35 |
36 |
37 | Token
38 |
39 |
40 |
58 |
59 | {user?.telegramAccount?.username && (
60 | <>
61 |
41 | {user?.token}
42 |
46 |
48 |
49 | 50 | 54 | Hubungkan dengan Telegram 55 | 56 |
57 |62 |
66 | Username
67 |
68 | @{user?.telegramAccount?.username}
69 |
70 |
71 |
72 | Nama
73 |
74 | {user?.telegramAccount?.firstName}
75 |
76 |
77 |
78 | )}
79 | {icon}
}
58 | {children}
59 |
59 | handleDeleteDevice(_id)}
83 | styleButton="danger"
84 | className={classNames(
85 | "!font-bold !px-3 !py-2 lg:invisible lg:group-hover:visible",
86 | { "lg:!visible": isLoading }
87 | )}
88 | width="fit"
89 | title="Hapus"
90 | isLoading={isLoading}
91 | onLoadingText="Menghapus"
92 | background={false}
93 | />
94 | )}
95 |
96 | );
97 | };
98 |
99 | export default Device;
100 |
--------------------------------------------------------------------------------
/src/app/globals.scss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 |
6 | /* create custom style for Tooltop recharts component */
7 | // .recharts-tooltip-wrapper{
8 | // outline: none;
9 | // padding: 2px;
10 | // background-color: #fff;
11 | // border-radius: 10px;
12 | // .recharts-default-tooltip{
13 | // border-radius: 10px !important;
14 | // border: 1px solid blue !important;
15 | // }
16 |
17 | // }
18 |
19 | *{
20 | outline: none;
21 | -webkit-tap-highlight-color: rgba(0,0,0,0);
22 | -webkit-tap-highlight-color: transparent;
23 | }
24 |
25 | // Remove the spin button from number input
26 | /* Chrome, Safari, Edge, Opera */
27 | input::-webkit-outer-spin-button,
28 | input::-webkit-inner-spin-button {
29 | -webkit-appearance: none;
30 | margin: 0;
31 | }
32 | /* Firefox */
33 | input[type=number] {
34 | -moz-appearance: textfield;
35 | }
36 |
37 | .recharts-cartesian-axis-tick text tspan {
38 | @apply dark:text-slate-400;
39 | }
40 |
41 | // this line bellow is for the InputWithLabel component, because the module.scss file is not working with the darkmode
42 |
43 | .input-with-label-wrapper{
44 | position: relative;
45 |
46 | label {
47 | @apply text-slate-500 dark:text-slate-300;
48 | position: absolute;
49 | left: 10px;
50 | top: 27px;
51 | transform: translateY(-50%);
52 | padding: 0 5px;
53 | transition: all 0.2s ease-in-out;
54 | }
55 |
56 |
57 | input, textarea{
58 | @apply bg-gray-100 text-slate-800 dark:text-slate-100 dark:bg-slate-500 ;
59 | transition: all 0.2s ease-in-out;
60 | &:focus + label {
61 | @apply bg-white dark:bg-slate-600;
62 | top: 0 !important;
63 | left: 20px;
64 | }
65 |
66 | &:not(:placeholder-shown) + label {
67 | @apply bg-white dark:bg-slate-600;
68 | top: 0 !important;
69 | left: 20px;
70 |
71 | }
72 |
73 | &::placeholder {
74 | color: transparent;
75 | }
76 |
77 | &:focus::placeholder {
78 | @apply text-gray-400;
79 | transition-delay: 100ms;
80 | }
81 |
82 | &:not(:placeholder-shown){
83 | @apply bg-transparent;
84 | @apply ring-1 ring-gray-300 invalid:ring-pink-400;
85 | }
86 |
87 |
88 | &:focus{
89 | @apply bg-transparent ring-2 ring-blue-400;
90 | }
91 |
92 | &:focus:not(:placeholder-shown){
93 | @apply ring-2 ring-blue-400 ;
94 | }
95 |
96 | &:not(:placeholder-shown) ~ .toggleHide {
97 | display: block;
98 | }
99 | }
100 |
101 | .toggleHide{
102 | @apply text-gray-500;
103 | display: none;
104 | position: absolute;
105 | right: 20px;
106 | top: 50%;
107 | transform: translateY(-50%);
108 | cursor: pointer;
109 | }
110 |
111 | }
112 |
113 | .hero-image{
114 | transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(-15deg) rotateY(32deg) rotateZ(1deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
115 | border-radius: 10px;
116 | overflow: hidden;
117 | }
118 |
119 | .hero-image:nth-child(2){
120 | transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(-15deg) rotateY(32deg) rotateZ(1deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
121 | border-radius: 10px;
122 | overflow: hidden;
123 | position: absolute;
124 | top: 100px;
125 | left: 80px;
126 |
127 | @media screen and (max-width: 768px) {
128 | top: 50px;
129 | left: 20px;
130 | }
131 | }
132 |
133 |
--------------------------------------------------------------------------------
/src/components/WalletCard/WalletCard.tsx:
--------------------------------------------------------------------------------
1 | import { QueryKey } from "@/types/QueryKey";
2 | import { WalletData } from "@/types/Wallet";
3 | import { updateWalletColor } from "@/utils/api/wallet";
4 | import { currencyFormat } from "@/utils/currencyFormat";
5 | import { useMutation, useQueryClient } from "@tanstack/react-query";
6 | import classNames from "classnames";
7 | import Link from "next/link";
8 | import { useState } from "react";
9 | import { WalletColor, walletColors } from "./constants";
10 | import WalletCardDropdown from "./WalletCardDropdown";
11 |
12 | type Props = {
13 | id: string;
14 | isDefault?: boolean;
15 | initColorKey: WalletColor;
16 | name: string;
17 | balance: number;
18 | link?: string;
19 | isCredit: boolean;
20 | demoMode?: boolean;
21 | };
22 |
23 | const WalletCard = ({
24 | id,
25 | isDefault = true,
26 | initColorKey,
27 | name,
28 | balance,
29 | isCredit,
30 | demoMode = false,
31 | }: Props) => {
32 | const [colorKey, setColorKey] = useState
60 |
80 | {!isCurrent && (
81 |
61 | {ua.device.type === "mobile" ? (
62 |
67 |
68 |
69 | {ua.device.model || ua.os.name}
70 | {isCurrent && (
71 |
72 | Sekarang
73 |
74 | )}
75 |
76 | {ua.browser.name}
77 | Login pada : {date}
78 |
79 |
77 |
104 | );
105 | };
106 |
107 | export default WalletCard;
108 |
--------------------------------------------------------------------------------
/src/stores/store.ts:
--------------------------------------------------------------------------------
1 | import { Theme, ThemeState } from "@/types/Theme";
2 | import { User } from "@/types/User";
3 | import { create } from "zustand";
4 | import { persist } from "zustand/middleware";
5 |
6 | interface Store {
7 | user: User | null;
8 | colorTheme: ThemeState;
9 | accessToken: string | null;
10 | deleteWalletId: string | null;
11 | transactionDetailState: {
12 | transactionId: string | null;
13 | setTransactionId: (id: string | null) => void;
14 | };
15 | addTransactionState: {
16 | walletId: string | null;
17 | setWalletId: (id: string | null) => void;
18 | isOpen: boolean;
19 | setOpen: (isOpen: boolean) => void;
20 | };
21 | transferBalanceState: {
22 | sourceWalletId: string | null;
23 | setSourceWalletId: (id: string | null) => void;
24 | destinationWalletId: string | null;
25 | setDestinationWalletId: (id: string | null) => void;
26 | isOpen: boolean;
27 | setOpen: (isOpen: boolean) => void;
28 | };
29 | setDeleteWalletId: (id: string | null) => void;
30 | setToken: (token: string) => void;
31 | setUser: (user: User | null) => void;
32 | setColorTheme: (theme: ThemeState) => void;
33 | }
34 |
35 | const useStore = create
78 |
85 | {name}
86 |
87 |
94 |
95 |
103 |
96 |
102 | Saldo {isCredit && "minus"}
97 |
98 | {isCredit && "-"}
99 | {currencyFormat(balance)}
100 |
101 |
38 | state.setEdit(false)}
40 | shape="circle"
41 | className="bg-white/40 text-slate-50 !p-2"
42 | >
43 |
45 |
51 |
53 |
54 | );
55 | }
56 |
57 | return (
58 |
59 | setWalletId(walletData._id)}
61 | shape="circle"
62 | className="bg-white/40 text-slate-50 !p-2"
63 | >
64 |
66 |
71 |
73 |
78 | state.setEdit(true)}
88 | icon={
92 |
101 |
102 | );
103 | };
104 |
105 | export default WalletOption;
106 |
--------------------------------------------------------------------------------