feat: add date to activities, add datepicker to form

Author: idChef

components/common/StyledField/StyledField.tsx

@@ -6,7 +6,7 @@ type StyledFieldProps = FieldAttributes<any>;
 export const StyledField: FunctionComponent<StyledFieldProps> = (props) => {
     return (
         <Field
-            className="focus:ring-primary-600 focus:border-primary-600 block w-full rounded-lg border border-black bg-gray-50 p-2.5 text-gray-900 sm:text-sm"
+            className="focus:ring-primary-600 focus:border-primary-600 block w-full rounded-lg border border-0 bg-gray-50 p-2.5 text-gray-900 dark:text-white/80 dark:bg-slate-800  sm:text-sm"
             {...props}
         />
     );

components/forms/ExpenseForm.tsx

@@ -9,11 +9,31 @@ import useSWR from "swr";
 import { Group } from "@prisma/client";
 import { CATEGORIES } from "constants/categories";
 import { enqueueSnackbar } from "notistack";
+import Datepicker from "react-tailwindcss-datepicker";
 
 type Expense = any;
 
 type CreateExpenseFormProps = {};
 
+const DatePickerField = ({
+    value,
+    onChange,
+}: {
+    value: any;
+    onChange: any;
+}) => {
+    return (
+        <Datepicker
+            useRange={false}
+            asSingle
+            value={value}
+            onChange={(val) => {
+                onChange("date", val);
+            }}
+        />
+    );
+};
+
 const CreateExpenseForm: React.FC<CreateExpenseFormProps> = () => {
     const { data: session } = useSession();
 
@@ -25,6 +45,7 @@ const CreateExpenseForm: React.FC<CreateExpenseFormProps> = () => {
         title: "",
         amount: "",
         type: "expense",
+        date: { startDate: new Date(), endDate: new Date() },
         group: groups?.[0]?.id ?? "",
         category: "",
         repeat: false,
@@ -49,12 +70,15 @@ const CreateExpenseForm: React.FC<CreateExpenseFormProps> = () => {
                 ...values,
                 userId: session?.user.id,
                 groupId: values.group,
+                date: values.date.startDate,
                 categoryId: values.category,
                 isSplit: values.split,
                 type: values.type,
                 isRepeating: values.repeat,
             });
 
+            console.log(values);
+
             enqueueSnackbar(`${values.type} added sucessfully`);
             resetForm();
         } catch (error) {
@@ -69,7 +93,7 @@ const CreateExpenseForm: React.FC<CreateExpenseFormProps> = () => {
             onSubmit={handleSubmit}
             enableReinitialize
         >
-            {({ isSubmitting, values }) => (
+            {({ isSubmitting, values, setFieldValue }) => (
                 <Form className="flex flex-col gap-4">
                     <div>
                         <Label htmlFor="title">Title</Label>
@@ -102,6 +126,14 @@ const CreateExpenseForm: React.FC<CreateExpenseFormProps> = () => {
                         </StyledField>
                     </div>
 
+                    <div>
+                        <Label htmlFor="group">Date</Label>
+                        <DatePickerField
+                            value={values.date}
+                            onChange={setFieldValue}
+                        />
+                    </div>
+
                     <div>
                         <Label htmlFor="type">Type</Label>
                         <StyledField as="select" id="type" name="type">

package.json

@@ -18,6 +18,7 @@
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "axios": "^1.3.4",
+    "dayjs": "^1.11.7",
     "eslint": "8.31.0",
     "eslint-config-next": "13.1.1",
     "formik": "^2.2.9",
@@ -28,6 +29,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-range": "^1.8.14",
+    "react-tailwindcss-datepicker": "^1.5.1",
     "swr": "^2.0.0",
     "typescript": "4.9.4",
     "yup": "^1.0.2"

pages/api/expenses.ts

@@ -5,6 +5,7 @@ type CreateExpenseRequest = {
     title: string;
     amount: number;
     userId: string;
+    date: string;
     groupId: string;
     categoryId: string;
     isSplit: boolean;
@@ -21,6 +22,7 @@ export default async function handler(
         amount,
         userId,
         groupId,
+        date,
         categoryId,
         isSplit,
         type,
@@ -33,6 +35,7 @@ export default async function handler(
                 title,
                 amount: +amount,
                 type,
+                date,
                 isRepeating,
                 categoryId,
                 isSplit: isSplit,

prisma/schema.prisma

@@ -94,6 +94,7 @@ model Activity {
   amount Float
   type   ActivityType
 
+  date        DateTime @default(now())
   userId      String
   createdAt   DateTime @default(now())
   groupId     String

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     content: [
         "./pages/**/*.{js,ts,jsx,tsx}",
         "./components/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
     ],
     theme: {
         extend: {},

yarn.lock

@@ -618,6 +618,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dayjs@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -2167,6 +2172,11 @@ react-range@^1.8.14:
   resolved "https://registry.yarnpkg.com/react-range/-/react-range-1.8.14.tgz#11047f69b365ac6c75c3d715771ebe76b93982ec"
   integrity sha512-v2nyD5106rHf9dwHzq+WRlhCes83h1wJRHIMFjbZsYYsO6LF4mG/mR3cH7Cf+dkeHq65DItuqIbLn/3jjYjsHg==
 
+react-tailwindcss-datepicker@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/react-tailwindcss-datepicker/-/react-tailwindcss-datepicker-1.5.1.tgz#442fbda87e0e686cf338ce7427ca9c3165f26cd6"
+  integrity sha512-IbNw3Lu2dwkRYOlYr3ffOwEbLiVz+QufaYbwiy0ToeLmx7ZUt0CPh3HfwVQGNS1/o4D/+8Rl4WHNsLd+wVb5Mg==
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"