Removed bootstrap template and added tailwindcss

compiled-lang/en.json

@@ -1,19 +1,12 @@
 {
-  "+6biWd": "General",
-  "1FjMUC": "Forgot Password?",
-  "4f3Ha0": "Notifications",
-  "6fyJfu": "Income",
-  "BA+pR5": "Dashboard",
+  "078WAr": "See all",
+  "5ARyR8": "Personal Finance",
+  "7vsu1w": "Sign in with Facebook",
   "CHu6Xm": "Total Spend (month)",
-  "Ov5n7/": "Login with Google",
-  "SnPbSY": "Expense",
-  "WiNWgq": "Transactions",
-  "ZvR3j+": "Expense",
+  "GMkXVd": "Recent Transactions",
+  "Op5EHr": "Sign in with Google",
+  "URe+qA": "Expense",
   "a9m3iY": "{amount} $",
   "bQAtuf": "Loading...",
-  "bzWGcA": "Login with Facebook",
-  "hY6xbQ": "Welcome Back!",
-  "kHTW+/": "Settings",
-  "o30WaQ": "Categories",
-  "tQ+miu": "Overview"
+  "gJkHZk": "Income"
 }

components/Button.tsx

@@ -0,0 +1,24 @@
+import React, { MouseEventHandler } from "react";
+
+export interface ButtonProps {
+  type: "button" | "submit" | "reset";
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = (props) => {
+  return (
+    <button
+      type={props.type}
+      onClick={props.onClick}
+      className={[
+        "h-12 px-6 rounded-full drop-shadow-lg",
+        props.className,
+      ].join(" ")}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+export default Button;

components/LargeNumberCard.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const LargeNumberCard: React.FC = () => {
+  return (
+    <div className="w-full flex flex-col justify-center items-center my-4 py-8 rounded-xl bg-gradient-to-r from-ikura-light to-ikura-dark">
+      <h4 className="text-white mb-1">Your net worrth</h4>
+      <h1 className="text-3xl text-white font-bold">$ 100,092.00</h1>
+    </div>
+  );
+};
+
+export default LargeNumberCard;

components/MobileNavbar.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import Link from "next/link";
+import { House, Add } from "@mui/icons-material";
+
+const MobileNavbar: React.FC = () => {
+  return (
+    <div className="w-full h-12 absolute bottom-0 shadow-reversed bg-white">
+      <div className="h-full flex flex-row items-center justify-between px-4">
+        <Link href="/">
+          <a className="">
+            <House />
+          </a>
+        </Link>
+        <Link href="/">
+          <a className="">
+            <House />
+          </a>
+        </Link>
+        <button
+          type="button"
+          className="w-12 h-12 rounded-full drop-shadow-xl mb-12 bg-gradient-to-br from-ikura-light to-ikura-dark text-white"
+        >
+          <Add />
+        </button>
+        <Link href="/">
+          <a className="">
+            <House />
+          </a>
+        </Link>
+        <Link href="/">
+          <a className="">
+            <House />
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default MobileNavbar;

components/RecentTransactions.tsx

@@ -1,194 +1,26 @@
-import { memo, forwardRef } from "react";
-import { DateTime } from "luxon";
-import { gql, useQuery, useMutation } from "@apollo/client";
+import React from "react";
 import { useIntl } from "react-intl";
-import { Dropdown } from "react-bootstrap";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-
-const GET_RECENT_TRANSACTIONS = gql`
-  query recentTransactionsTable {
-    queryTransaction(first: 10, order: { desc: when }) {
-      id
-      type
-      amount
-      when
-      category {
-        id
-        title
-      }
-    }
-  }
-`;
-
-const DELETE_TRANSACTION_MUTATION = gql`
-  mutation deleteTransactionMutation($id: ID!) {
-    deleteTransaction(filter: { id: [$id] }) {
-      msg
-    }
-  }
-`;
-
-const DeleteAlert = withReactContent(Swal);
+import Transaction from "components/Transaction";
 
 const RecentTransactions: React.FC = () => {
   const intl = useIntl();
 
-  const [deleteTransaction] = useMutation(DELETE_TRANSACTION_MUTATION);
-  const { loading, error, data, refetch } = useQuery(GET_RECENT_TRANSACTIONS, {
-    variables: {},
-  });
-  if (error) {
-    console.error(error);
-  }
-
-  const getList = (data: any) => {
-    if (data && data.queryTransaction) {
-      return data.queryTransaction;
-    }
-    return [];
-  };
-
-  const onDelete = async (id: string) => {
-    const { isConfirmed } = await DeleteAlert.fire({
-      title: "Are you sure?",
-      text: "Do you want to delete this transaction?",
-      icon: "question",
-      allowEnterKey: false,
-      showCancelButton: true,
-      confirmButtonText: "Delete",
-      reverseButtons: true,
-    });
-    if (isConfirmed) {
-      await deleteTransaction({
-        variables: { id },
-        refetchQueries: ["totalTransactionsSum"],
-      });
-      await refetch();
-    }
-  };
-
   return (
-    <div className="card shadow mb-4">
-      <div className="card-header py-3">
-        <h6 className="m-0 font-weight-bold text-primary">
-          Recent Transactions
-        </h6>
+    <div className="w-full my-3">
+      <div className="flex flex-row justify-between items-center">
+        <h3 className="font-semibold">
+          {intl.formatMessage({ defaultMessage: "Recent Transactions" })}
+        </h3>
+        <button type="button" className="text-gray-400 text-sm">
+          {intl.formatMessage({ defaultMessage: "See all" })}
+        </button>
       </div>
-      <div className="card-body">
-        {loading ? (
-          <div className="spinner-border" role="status">
-            <span className="visually-hidden">
-              {intl.formatMessage({
-                defaultMessage: "Loading...",
-                description: "default loading",
-              })}
-            </span>
-          </div>
-        ) : getList(data).length > 0 ? (
-          <div className="table-responsive">
-            <div className="row">
-              <div className="col-12">
-                <table className="table table-bordered">
-                  <thead>
-                    <tr>
-                      <th>
-                        <span className="text-muted list-sort">Amount</span>
-                      </th>
-                      <th>
-                        <span className="text-muted list-sort">Type</span>
-                      </th>
-                      <th>
-                        <span className="text-muted list-sort">Date</span>
-                      </th>
-                      <th>
-                        <span className="text-muted list-sort">Categories</span>
-                      </th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <tbody className="list" style={{ borderTop: "0" }}>
-                    {getList(data).map((transaction: any) => (
-                      <tr key={transaction.id}>
-                        <td>
-                          {intl.formatMessage(
-                            {
-                              defaultMessage: "{amount} $",
-                              description: "monetary amount readout",
-                            },
-                            {
-                              amount: intl.formatNumber(transaction.amount),
-                            }
-                          )}
-                        </td>
-                        <td>
-                          {transaction.type === "EXPENSE"
-                            ? intl.formatMessage({
-                                defaultMessage: "Expense",
-                                description: "recent transactions table",
-                              })
-                            : intl.formatMessage({
-                                defaultMessage: "Income",
-                                description: "recent transactions table",
-                              })}
-                        </td>
-                        <td>
-                          {DateTime.fromISO(transaction.when).toFormat(
-                            "dd/MM/yyyy"
-                          )}
-                        </td>
-                        <td>{transaction.category?.title}</td>
-                        <td className="text-end">
-                          <Dropdown>
-                            <Dropdown.Toggle as={CustomToggle} />
-                            <Dropdown.Menu>
-                              <button
-                                type="button"
-                                className="dropdown-item"
-                                onClick={() => onDelete(transaction.id)}
-                              >
-                                Delete
-                              </button>
-                            </Dropdown.Menu>
-                          </Dropdown>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div className="row">
-              <div className="col-12">
-                <div className="dataTables_info" role="status">
-                  Showing 1 to 10 of 57 entries
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="card-body text-center">
-            <span>No data</span>
-          </div>
-        )}
+      <div>
+        <Transaction />
+        <Transaction />
       </div>
     </div>
   );
 };
 
-// eslint-disable-next-line react/display-name
-const CustomToggle = forwardRef(({ onClick }: any, ref: any) => (
-  <a
-    ref={ref}
-    onClick={(e) => {
-      e.preventDefault();
-      onClick(e);
-    }}
-    className="dropdown-ellipses dropdown-toggle"
-    style={{ cursor: "pointer" }}
-  >
-    <i className="fe fe-more-vertical" />
-  </a>
-));
-
-export default memo(RecentTransactions);
+export default RecentTransactions;

components/SmallNumberCard.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import classNames from "classnames";
+import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
+
+export interface SmallNumberCardProps {
+  amount: number;
+}
+
+const SmallNumberCard: React.FC<SmallNumberCardProps> = (props) => {
+  const intl = useIntl();
+
+  return (
+    <div
+      className={classNames(
+        "w-full flex flex-row justify-start items-center mx-2 px-4 py-3 rounded-xl",
+        {
+          "bg-green-300": props.amount > 0,
+          "bg-red-200": props.amount < 0,
+        }
+      )}
+    >
+      {props.amount > 0 ? (
+        <ArrowUpward
+          className={classNames("mr-2", {
+            "text-green-700": props.amount > 0,
+            "text-red-700": props.amount < 0,
+          })}
+        />
+      ) : (
+        <ArrowDownward
+          className={classNames("mr-2", {
+            "text-green-700": props.amount > 0,
+            "text-red-700": props.amount < 0,
+          })}
+        />
+      )}
+      <div>
+        <span
+          className={classNames("font-light", {
+            "text-green-700": props.amount > 0,
+            "text-red-700": props.amount < 0,
+          })}
+        >
+          {props.amount > 0
+            ? intl.formatMessage({ defaultMessage: "Income" })
+            : intl.formatMessage({ defaultMessage: "Expense" })}
+        </span>
+        <h5
+          className={classNames("font-medium", {
+            "text-green-700": props.amount > 0,
+            "text-red-700": props.amount < 0,
+          })}
+        >
+          $ {intl.formatNumber(props.amount)}
+        </h5>
+      </div>
+    </div>
+  );
+};
+
+export default SmallNumberCard;