hello!! this is currently not quite working right. the emoji modal popup is causing

1 of 1 error
Next.js (14.2.13)

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of HabitTracker.

Call Stack
React
createFiberFromTypeAndProps
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (27944:1)
createFiberFromElement
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (27970:1)
createChild
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (9726:1)
reconcileChildrenArray
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10088:1)
reconcileChildFibersImpl
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10515:1)
reconcileChildFibers
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10573:1)
reconcileChildren
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15802:1)
updateFragment
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16230:1)
beginWork$1
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18525:1)
beginWork
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26927:1)
performUnitOfWork
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25748:1)
workLoopSync
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25464:1)
renderRootSync
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25419:1)
recoverFromConcurrentError
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24597:1)
performSyncWorkOnRoot
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24899:1)
flushSyncWorkAcrossRoots_impl
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7758:1)
flushSyncWorkOnAllRoots
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7718:1)
processRootScheduleInMicrotask
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7863:1)
eval
node_modules/.pnpm/next@14.2.13_@opentelemetry+api@1.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (80

"use client";

import React, { useState, useEffect } from 'react';
import { Table, Modal, Button } from 'antd';
import { CloseCircleOutlined, SmileOutlined, MehOutlined, FrownOutlined, LaughOutlined, HeartOutlined } from '@ant-design/icons';

const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const habits = ['Exercise', 'Read', 'Meditate', 'Write'];

const getCurrentWeekDates = () => {
const today = new Date();
const currentDay = today.getDay();
const startOfWeek = new Date(today);
startOfWeek.setDate(today.getDate() - currentDay);

return daysOfWeek.map((day, index) => {
const date = new Date(startOfWeek);
date.setDate(startOfWeek.getDate() + index);
return date.toISOString().split('T')[0];
});
};

const generateDataSource = () => {
const dates = getCurrentWeekDates();

const specialRows = [
{ key: 'dates', habit: 'Dates', ...dates.reduce((acc, date, index) => ({ ...acc, [daysOfWeek[index]]: date }), {}) },
{ key: 'mood', habit: 'Mood', ...daysOfWeek.reduce((acc, day) => ({ ...acc, [day]: '' }), {}) },
{ key: 'habit2', habit: 'Habit 2', ...daysOfWeek.reduce((acc, day) => ({ ...acc, [day]: '' }), {}) },
];

const habitRows = habits.map((habit, index) => ({
key: habit${index + 3},
habit,
...daysOfWeek.reduce((acc, day) => ({ ...acc, [day]: '' }), {}),
}));

return [...specialRows, ...habitRows];
};

const HabitTracker = () => {
const [data, setData] = useState(generateDataSource());
const [isModalVisible, setIsModalVisible] = useState(false);
const [selectedDay, setSelectedDay] = useState('');
const [selectedKey, setSelectedKey] = useState('');

useEffect(() => {
const interval = setInterval(() => {
setData(generateDataSource());
}, 60000); // Update every minute to check for new week

code
return () => clearInterval(interval);
}, []);

const handleCellClick = (key, day) => {
if (key === 'dates' || key === 'habit2') return; // Prevent clicking on the 'Dates' and 'Habit 2' rows
if (key === 'mood') {
setIsModalVisible(true);
setSelectedDay(day);
setSelectedKey(key);
} else {
setData((prevData) =>
prevData.map((item) =>
item.key === key ? { ...item, [day]: item[day] === 'Completed' ? '' : 'Completed' } : item
)
);
}
};

const handleMoodSelection = (emojiName) => {
setData((prevData) =>
prevData.map((item) =>
item.key === selectedKey ? { ...item, [selectedDay]: emojiName } : item
)
);
setIsModalVisible(false);
};

const getEmojiComponent = (emojiName) => {
switch (emojiName) {
case 'smile':
return ;
case 'meh':
return ;
case 'frown':
return ;
case 'laugh':
return ;
case 'heart':
return ;
default:
return null;
}
};

const columns = [
{
title: 'Habit',
dataIndex: 'habit',
key: 'habit',
fixed: 'left',
width: 100,
},
...daysOfWeek.map((day) => ({
title: day,
dataIndex: day,
key: day,
render: (text, record) => {
const today = new Date().getDay();
const isToday = daysOfWeek.indexOf(day) === today;

code
    if (record.key === 'dates') {
      return <div>{text}</div>;
    }

    const isClickable = !['dates', 'habit2'].includes(record.key);
    return (
      <div
        onClick={() => isClickable && handleCellClick(record.key, day)}
        style={{
          backgroundColor: isToday ? 'lightyellow' : text ? 'lightgreen' : 'transparent',
          cursor: isClickable ? 'pointer' : 'default',
          padding: '8px',
          textAlign: 'center',
        }}
      >
        {typeof text === 'string' ? (text === 'Completed' ? <CloseCircleOutlined /> : '') : getEmojiComponent(text)}
      </div>
    );
  },
})),
];

return (



<Modal
title="Select Your Mood"
visible={isModalVisible}
onOk={() => setIsModalVisible(false)}
onCancel={() => setIsModalVisible(false)}
footer={[
<Button key="back" onClick={() => setIsModalVisible(false)}>
Cancel
,
]}
>
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<Button onClick={() => handleMoodSelection('smile')}>
<Button onClick={() => handleMoodSelection('meh')}>
<Button onClick={() => handleMoodSelection('frown')}>
<Button onClick={() => handleMoodSelection('laugh')}>
<Button onClick={() => handleMoodSelection('heart')}>



);
};
export default HabitTracker;