[v2] - Implement connecting to firestore DB, fetch data, create data, edit data, delete data

next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ['img.clerk.com'],
+  },
+};
 
 export default nextConfig;

src/app/components/AddNewTradeBtn.js

@@ -1,4 +1,4 @@
-import { FaPlus } from 'react-icons/fa'; // Importing a plus icon from react-icons
+import { FaPlus } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 
 const AddNewTradeBtn = ({ onAddTrade }) => {

src/app/components/AddNewTradeFormModal.js → src/app/components/AddNewTradeFormSidebar.js

@@ -112,17 +112,17 @@ const Content = ({ tickers = MOCK_TICKERS, onSubmit, onClose }) => {
     <div>
       <button
         onClick={handleClose}
-        aria-label="Close modal"
+        aria-label="Close sidebar"
         className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 focus:outline-none"
       >
         ✕
       </button>
       {!isSubmitted && (
         <>
-          <h2 id="add-trade-modal-title" className="text-2xl font-semibold mb-4 text-indigo-600">
+          <h2 id="add-trade-sidebar-title" className="text-2xl font-semibold mb-4 text-indigo-600">
             Add New Trade
           </h2>
-          <p id="add-trade-modal-description" className="text-sm text-gray-600 mb-6">
+          <p id="add-trade-sidebar-description" className="text-sm text-gray-600 mb-6">
             Fill out the form below to record your trade details.
           </p>
 
@@ -543,19 +543,19 @@ Content.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-const AddNewTradeFormModal = ({ tickers = MOCK_TICKERS, onSubmit, onClose }) => {
+const AddNewTradeFormSidebar = ({ tickers = MOCK_TICKERS, onSubmit, onClose }) => {
   return createPortal(
     <TransitionOverlay onClose={onClose}>
-      <Content tickers={tickers} onSubmit={onSubmit} onClose={onClose} />
+      <Content tickers={tickers} onSubmit={onSubmit} />
     </TransitionOverlay>,
     document.body,
   );
 };
 
-AddNewTradeFormModal.propTypes = {
+AddNewTradeFormSidebar.propTypes = {
   tickers: PropTypes.arrayOf(PropTypes.string),
   onSubmit: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddNewTradeFormModal;
+export default AddNewTradeFormSidebar;

src/app/components/AllTradesBtn.js

@@ -1,5 +1,5 @@
-import { FaPlus } from 'react-icons/fa'; // Importing a plus icon from react-icons
 import PropTypes from 'prop-types';
+import { FaPlus } from 'react-icons/fa';
 
 const AllTradesBtn = ({ onSeeAllTrades }) => {
   return (

src/app/components/CustomCalendar.js

@@ -23,7 +23,7 @@ const TradingCalendarView = ({ trades, onUserSelectedDate }) => {
   const end = endOfMonth(currentMonth);
   const days = eachDayOfInterval({ start, end });
 
-  // Aggregate trades by date
+  // aggregate trades by date
   const totalsByDate = trades.reduce((acc, trade) => {
     const tradeDate = format(new Date(trade.tradeDate), 'yyyy-MM-dd');
     const outcome = parseFloat(trade.priceClosed) - parseFloat(trade.priceOpened);
@@ -33,7 +33,7 @@ const TradingCalendarView = ({ trades, onUserSelectedDate }) => {
     return acc;
   }, {});
 
-  // Monthly stats calculations
+  // monthly stats calculations
   const monthlyStats = trades.reduce(
     (acc, trade) => {
       const tradeDate = new Date(trade.tradeDate);
@@ -56,12 +56,9 @@ const TradingCalendarView = ({ trades, onUserSelectedDate }) => {
   const handleToday = () => setCurrentMonth(today);
 
   const handleDayClick = (day) => {
-    console.log(day);
     const dateKey = format(day, 'yyyy-MM-dd');
-    console.log(dateKey);
-
     if (totalsByDate[dateKey]) {
-      onUserSelectedDate(dateKey); // Call the prop with the clicked date if it has trades data
+      onUserSelectedDate(dateKey);
     }
   };
 
@@ -186,23 +183,23 @@ const TradingCalendarView = ({ trades, onUserSelectedDate }) => {
         {days.map((day) => {
           const dateKey = format(day, 'yyyy-MM-dd');
           const total = totalsByDate[dateKey] || 0;
-          const isWeekend = [0, 6].includes(getDay(day)); // Check if it's Saturday or Sunday
+          const isWeekend = [0, 6].includes(getDay(day));
           const highlightToday = isToday(day) ? 'ring-2 ring-indigo-600' : '';
-          const isClickable = totalsByDate[dateKey] !== undefined; // Check if the day has trade data
+          const isClickable = totalsByDate[dateKey] !== undefined;
 
           return (
             <div
               key={day}
-              onClick={() => isClickable && handleDayClick(day)} // Only call handleDayClick if clickable
+              onClick={() => isClickable && handleDayClick(day)}
               className={`p-4 rounded-lg shadow-sm ${highlightToday} ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
               style={{
                 background: isWeekend
-                  ? 'rgba(169, 169, 169, 0.3)' // Light gray for weekends in light mode
+                  ? 'rgba(169, 169, 169, 0.3)'
                   : total > 0
-                    ? 'rgba(0, 128, 0, 0.1)' // Green for positive trades
+                    ? 'rgba(0, 128, 0, 0.1)'
                     : total < 0
-                      ? 'rgba(255, 0, 0, 0.1)' // Red for negative trades
-                      : 'var(--background)', // Default background for days with no trades
+                      ? 'rgba(255, 0, 0, 0.1)'
+                      : 'var(--background)',
                 color: 'var(--foreground)',
               }}
             >

src/app/components/CustomCalendarMobile.js

@@ -13,7 +13,7 @@ const TradingCalendarViewMobile = ({ trades, onUserSelectedDate }) => {
   const start = startOfMonth(currentMonth);
   const end = endOfMonth(currentMonth);
 
-  // Aggregate trades by date
+  // aggregate trades by date
   const totalsByDate = trades.reduce((acc, trade) => {
     const tradeDate = format(new Date(trade.tradeDate), 'yyyy-MM-dd');
     const outcome = parseFloat(trade.priceClosed) - parseFloat(trade.priceOpened);
@@ -23,7 +23,7 @@ const TradingCalendarViewMobile = ({ trades, onUserSelectedDate }) => {
     return acc;
   }, {});
 
-  // Monthly stats calculations
+  // monthly stats calculations
   const monthlyStats = trades.reduce(
     (acc, trade) => {
       const tradeDate = new Date(trade.tradeDate);
@@ -51,12 +51,9 @@ const TradingCalendarViewMobile = ({ trades, onUserSelectedDate }) => {
   });
 
   const handleDayClick = (day) => {
-    console.log(day);
     const dateKey = format(day, 'yyyy-MM-dd');
-    console.log(dateKey);
-
     if (totalsByDate[dateKey]) {
-      onUserSelectedDate(dateKey); // Call the prop with the clicked date if it has trades data
+      onUserSelectedDate(dateKey);
     }
   };
 
@@ -161,13 +158,13 @@ const TradingCalendarViewMobile = ({ trades, onUserSelectedDate }) => {
       {/* Days List */}
       <div className="space-y-2">
         {days.map((day) => {
-          const isWeekend = [0, 6].includes(day.date.getDay()); // Check if it's a weekend
+          const isWeekend = [0, 6].includes(day.date.getDay());
           const textColor =
             !isWeekend && day.total > 0
               ? 'text-green-600'
               : !isWeekend && day.total < 0
                 ? 'text-red-600'
-                : 'text-gray-400'; // Grayed-out for weekends and no trades
+                : 'text-gray-400';
           const highlightToday = isToday(day.date) ? 'ring-2 ring-indigo-600' : '';
 
           return (
@@ -176,12 +173,12 @@ const TradingCalendarViewMobile = ({ trades, onUserSelectedDate }) => {
               className={`flex items-center justify-between p-3 rounded-lg shadow-sm ${highlightToday}`}
               style={{
                 background: isWeekend
-                  ? 'rgba(169, 169, 169, 0.3)' // Light gray for weekends
+                  ? 'rgba(169, 169, 169, 0.3)'
                   : day.total > 0
-                    ? 'rgba(0, 128, 0, 0.1)' // Green for positive trades
+                    ? 'rgba(0, 128, 0, 0.1)'
                     : day.total < 0
-                      ? 'rgba(255, 0, 0, 0.1)' // Red for negative trades
-                      : 'var(--background)', // Default background for no trades
+                      ? 'rgba(255, 0, 0, 0.1)'
+                      : 'var(--background)',
                 color: 'var(--foreground)',
               }}
               onClick={() => !isWeekend && handleDayClick(day.date)}
@@ -196,7 +193,7 @@ const TradingCalendarViewMobile = ({ trades, onUserSelectedDate }) => {
               </div>
               <div className={`text-sm font-medium ${textColor}`}>
                 {isWeekend
-                  ? 'No Trades' // Always "No Trades" for weekends
+                  ? 'No Trades' // always "No Trades" for weekends
                   : day.total > 0
                     ? `+${day.total}`
                     : day.total < 0

src/app/components/DeleteAccountSidebar.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import TransitionOverlay from './TransitionOverlay';
+
+function Content({ handleDeleteAccount, onClose, isDeletingUserDetails }) {
+  return (
+    <>
+      <h3 className="text-xl font-semibold text-gray-800 mb-4">
+        Are you sure you want to delete your account?
+      </h3>
+      <p className="text-sm text-gray-600 mb-4">
+        This action is irreversible and will permanently delete all your data.
+      </p>
+      <div className="mt-6 flex flex-col justify-end gap-4">
+        <button
+          onClick={handleDeleteAccount}
+          disabled={isDeletingUserDetails}
+          className={`bg-red-600 text-white px-5 py-3 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition ${isDeletingUserDetails ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+          {isDeletingUserDetails ? 'Deleting...' : 'Yes, Delete Account'}
+        </button>
+        <button
+          onClick={onClose}
+          className="bg-gray-600 text-white px-5 py-3 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition"
+        >
+          Cancel
+        </button>
+      </div>
+    </>
+  );
+}
+
+Content.propTypes = {
+  handleDeleteAccount: PropTypes.func.isRequired,
+  isDeletingUserDetails: PropTypes.bool,
+  deletingUserDetailsError: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+};
+
+const DeleteAccountSidebar = ({ isDeletingUserDetails, handleDeleteAccount, onClose }) => {
+  return createPortal(
+    <TransitionOverlay onClose={onClose}>
+      <Content
+        isDeletingUserDetails={isDeletingUserDetails}
+        handleDeleteAccount={handleDeleteAccount}
+        onClose={onClose}
+      />
+    </TransitionOverlay>,
+    document.body,
+  );
+};
+
+export default DeleteAccountSidebar;

src/app/components/EditTradeBtn.js

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 const EditTradeBtn = ({ onEditTrade }) => {
   return (
     <div className="fixed bottom-5 right-40">
-      {/* Container for button and label */}
       <div className="relative group">
-        {/* The button itself */}
         <button
           onClick={onEditTrade}
           className="flex items-center justify-center w-16 h-16 rounded-full bg-indigo-600 text-white shadow-lg hover:bg-indigo-700 hover:opacity-90 transition ease-in-out duration-300"

src/app/components/EditTradeFormModal.js → src/app/components/EditTradeFormSidebar.js

@@ -123,20 +123,23 @@ const Content = ({
 
   return (
     <TransitionOverlay>
-      <div className="edit-trade-form-modal-content">
+      <div className="edit-trade-form-sidebar-content">
         <button
           onClick={handleClose}
-          aria-label="Close modal"
+          aria-label="Close sidebar"
           className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 focus:outline-none"
         >
           ✕
         </button>
         {!isSubmitted && (
           <>
-            <h2 id="edit-trade-modal-title" className="text-2xl font-semibold mb-4 text-indigo-600">
+            <h2
+              id="edit-trade-sidebar-title"
+              className="text-2xl font-semibold mb-4 text-indigo-600"
+            >
               Edit Trade Details
             </h2>
-            <p id="edit-trade-modal-description" className="text-sm text-gray-600 mb-6">
+            <p id="edit-trade-sidebar-description" className="text-sm text-gray-600 mb-6">
               Update the form below to edit your trade details.
             </p>
 
@@ -499,7 +502,7 @@ Content.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-const EditTradeFormModal = ({
+const EditTradeFormSidebar = ({
   tradeToEdit = MOCK_TRADE_SUBMISSION,
   tickers = MOCK_TICKERS,
   onSubmit,
@@ -512,11 +515,11 @@ const EditTradeFormModal = ({
   );
 };
 
-EditTradeFormModal.propTypes = {
+EditTradeFormSidebar.propTypes = {
   tradeToEdit: PropTypes.object,
   tickers: PropTypes.array,
   onSubmit: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default EditTradeFormModal;
+export default EditTradeFormSidebar;

src/app/components/FeatureChecklist.js

@@ -8,7 +8,7 @@ const FeatureChecklist = () => {
         <h2
           className="text-3xl sm:text-4xl font-extrabold mb-12"
           style={{
-            color: 'var(--foreground)', // Title color based on theme
+            color: 'var(--foreground)',
           }}
         >
           What We Offer
@@ -19,31 +19,31 @@ const FeatureChecklist = () => {
           <div
             className="flex flex-col items-center rounded-md p-4"
             style={{
-              background: 'var(--background)', // Background color based on theme
-              color: 'var(--foreground)', // Text color based on theme
+              background: 'var(--background)',
+              color: 'var(--foreground)',
             }}
           >
             <div
               className="rounded-full p-6 mb-4"
               style={{
-                background: '#333333', // Dark background for better icon contrast
-                color: 'white', // White color for the icon
+                background: '#333333',
+                color: 'white',
               }}
             >
               <FaUserAlt size={36} />
             </div>
             <h3
               className="text-xl font-semibold mb-2"
               style={{
-                color: 'var(--foreground)', // Text color for heading
+                color: 'var(--foreground)',
               }}
             >
               Personalized Account
             </h3>
             <p
               className="text-base"
               style={{
-                color: 'var(--foreground)', // Text color for paragraph
+                color: 'var(--foreground)',
                 opacity: 0.7,
               }}
             >
@@ -62,7 +62,7 @@ const FeatureChecklist = () => {
             <div
               className="rounded-full p-6 mb-4"
               style={{
-                background: '#333333', // Dark background for better icon contrast
+                background: '#333333',
                 color: 'white',
               }}
             >
@@ -98,7 +98,7 @@ const FeatureChecklist = () => {
             <div
               className="rounded-full p-6 mb-4"
               style={{
-                background: '#333333', // Dark background for better icon contrast
+                background: '#333333',
                 color: 'white',
               }}
             >