speeddial icon to add expense

next/package.json

@@ -12,9 +12,12 @@
     "@clerk/nextjs": "^4.29.4",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@headlessui/react": "^1.7.18",
     "@mui/icons-material": "^5.15.5",
     "@mui/material": "^5.15.5",
+    "@mui/x-date-pickers": "^6.19.0",
     "axios": "^1.6.5",
+    "dayjs": "^1.11.10",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18"

next/src/app/components/ExpenseForm.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import React from "react";
+import axios from "axios";
+import { useAuth } from "@clerk/nextjs";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
+import SendIcon from "@mui/icons-material/Send";
+
+export default function ExpenseForm({ setIsOpen }: any) {
+  const style = {
+    marginY: 2,
+  };
+  const { getToken } = useAuth();
+  const [expense, setExpense] = React.useState({
+    title: "",
+    amount: null,
+    description: "",
+    date: dayjs(Date.now()),
+  });
+
+  const handleSubmit = async () => {
+    const token = await getToken();
+
+    try {
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/expenses/upsert`,
+        {
+          title: expense.title,
+          description: expense.description,
+          amount: expense.amount,
+          date: expense.date,
+        },
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+      console.log("Expense submitted successfully", response.data);
+    } catch (error) {
+      console.error("Error submitting expense:", error);
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = e.target;
+    setExpense((prevData) => ({
+      ...prevData,
+      [id]: value,
+    }));
+  };
+
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <TextField
+          id="title"
+          label="Title"
+          variant="outlined"
+          value={expense.title}
+          onChange={handleInputChange}
+          sx={style}
+          InputLabelProps={{ shrink: true }}
+        />
+        <TextField
+          id="amount"
+          label="Amount"
+          variant="outlined"
+          value={expense.amount}
+          placeholder="0.00"
+          onChange={handleInputChange}
+          InputProps={{
+            startAdornment: <InputAdornment position="start">$</InputAdornment>,
+          }}
+          sx={style}
+        />
+        <TextField
+          id="description"
+          label="Description"
+          variant="outlined"
+          value={expense.description}
+          onChange={handleInputChange}
+          sx={style}
+          InputLabelProps={{ shrink: true }}
+        />
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DatePicker
+            label="Controlled picker"
+            value={expense.date}
+            onChange={(newValue) => {
+              setExpense((prevData: any) => ({
+                ...prevData,
+                date: newValue,
+              }));
+            }}
+            sx={style}
+          />
+        </LocalizationProvider>
+        <Button
+          size="large"
+          variant="outlined"
+          onClick={handleSubmit}
+          endIcon={<SendIcon />}
+          sx={style}
+        >
+          Record Expense
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

next/src/app/components/MyModal.tsx

@@ -0,0 +1,39 @@
+import Backdrop from "@mui/material/Backdrop";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Fade from "@mui/material/Fade";
+
+export const MyModal = ({ isOpen, setIsOpen, children }: any) => {
+  const style = {
+    position: "absolute" as "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 400,
+    bgcolor: "background.paper",
+    borderRadius: 4,
+    boxShadow: 24,
+  };
+
+  return (
+    <div>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Fade in={isOpen}>
+          <Box sx={style}>{children}</Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+};

next/src/app/components/MySpeedDial.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import SpeedDial from "@mui/material/SpeedDial";
+import SpeedDialIcon from "@mui/material/SpeedDialIcon";
+import SpeedDialAction from "@mui/material/SpeedDialAction";
+import PaymentIcon from "@mui/icons-material/Payment";
+
+import { MyModal } from "@/app/components/MyModal";
+import ExpenseForm from "@/app/components/ExpenseForm";
+
+export default function BasicSpeedDial() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const actions = [
+    { icon: <PaymentIcon />, name: "Expense", onClick: () => setIsOpen(true) },
+  ];
+
+  return (
+    <>
+      {/* Speed dial */}
+      <SpeedDial
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: "fixed", bottom: 16, right: 16 }}
+        icon={<SpeedDialIcon />}
+      >
+        {actions.map((action) => (
+          <SpeedDialAction
+            key={action.name}
+            icon={action.icon}
+            tooltipTitle={action.name}
+            onClick={action.onClick}
+          />
+        ))}
+      </SpeedDial>
+
+      {/* Modal */}
+      <MyModal isOpen={isOpen} setIsOpen={setIsOpen}>
+        <ExpenseForm setIsOpen={setIsOpen} />
+      </MyModal>
+    </>
+  );
+}