Add OverviewConfig to allow for additional queries, setup sem2 page

src/app/OverviewPage.tsx

@@ -0,0 +1,36 @@
+import {SubjectComparisonCard, SubjectOverviewCard} from "@/app/a.client";
+import {CalendarOverviewCard} from "@/app/calendarOverviewCard";
+import {OverviewConfig} from "@/app/overviewConfig";
+
+export default function OverviewPage({config}: {
+    config: OverviewConfig
+}) {
+    const projectIds = config.subjects.map((subject) => subject.projectId);
+
+    return (
+        <main className="m-6">
+            <h1 className="text-3xl font-semibold text-slate-900 dark:text-white my-2">{config.title}</h1>
+
+            <div className="grid gap-5 grid-cols-1 sm:grid-cols-4">
+                {config.subjects.map((subject) => (
+                    <SubjectOverviewCard
+                        key={subject.projectId}
+                        projectId={subject.projectId}
+                        title={subject.title}
+                        startTime={config.timePeriod.start}
+                        endTime={config.timePeriod.end}
+                    />
+                ))}
+
+
+                <CalendarOverviewCard
+                    startTime={config.timePeriod.start}
+                    endTime={config.timePeriod.end}
+                    projectIds={projectIds}
+                />
+
+                <SubjectComparisonCard projectIds={projectIds}/>
+            </div>
+        </main>
+    )
+}

src/app/a.client.tsx

@@ -8,10 +8,14 @@ import * as R from "ramda";
 
 export function SubjectOverviewCard({
                                         projectId,
-                                        title
+                                        title,
+                                        startTime = '2023-12-15T00:00:00.000Z',
+                                        endTime = '2024-01-25T00:00:00.000Z',
                                     }: {
     projectId: number,
     title?: string
+    startTime?: string,
+    endTime?: string,
 }) {
     const {
         data: _project
@@ -37,7 +41,7 @@ export function SubjectOverviewCard({
         data,
         error,
         isLoading,
-    } = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.2023-12-15T00:00:00.000Z`, fetcher);
+    } = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.${startTime}&start=lt.${endTime}`, fetcher);
     const [a, setA] = useState(0)
 
     useEffect(() => {

src/app/calendarOverviewCard.tsx

@@ -8,16 +8,7 @@ import * as dFns from 'date-fns';
 import CalendarHeatmap from 'react-calendar-heatmap';
 import 'react-calendar-heatmap/dist/styles.css';
 import './calendar-styles.css'
-import { Tooltip } from 'react-tooltip';
+import {Tooltip} from 'react-tooltip';
-
-const initialDate = dFns.parseISO('2023-12-15T00:00:00.000Z')
-const endDate = dFns.parseISO('2024-01-25T00:00:00.000Z')
-export const projectIds = [
-    195482340,
-    195519024,
-    195518593,
-    195754611,
-];
 
 const dailyGoal = 4;
 const granularity = 4;
@@ -29,17 +20,15 @@ function computeCompletionShade(value: number) {
     return linearValue;
 }
 
-function useCalendarData() {
+function useCalendarData(projectIds: number[], initialDate: string, endDate: string) {
     const {
         data: timeEntries,
-        error,
-        isLoading,
     } = useSWR<{
         raw_json: {
             start: string,
             seconds: number,
         }
-    }[]>(`/api/time_entry?select=raw_json&start=gt.${dFns.formatISO(initialDate)}&project_id=in.(${projectIds.join(',')})`, fetcher, {});
+    }[]>(`/api/time_entry?select=raw_json&start=gt.${(initialDate)}&start=lt.${(endDate)}&project_id=in.(${projectIds.join(',')})`, fetcher, {});
 
     const [data, setData] = useState<{
         date: Date,
@@ -60,8 +49,8 @@ function useCalendarData() {
 
         // Fill in missing days, hacky
         dFns.eachDayOfInterval({
-            start: initialDate,
+            start: dFns.parseISO(initialDate),
-            end: endDate,
+            end: dFns.parseISO(endDate),
         }).forEach((date) => {
             const key = dFns.formatISO(date);
             if (summed[key] == undefined) {
@@ -79,8 +68,18 @@ function useCalendarData() {
     return data
 }
 
-export function CalendarOverviewCard() {
+export function CalendarOverviewCard({
-    const data = useCalendarData();
+                                         projectIds,
+                                         startTime,
+                                         endTime
+                                     }: {
+    projectIds: number[],
+    startTime: string,
+    endTime: string,
+}) {
+    const initialDate = dFns.parseISO(startTime);
+    const endDate = dFns.parseISO(endTime);
+    const data = useCalendarData(projectIds, startTime, endTime);
 
     return <Card className="col-span-1">
         <Tooltip id="calendar-tooltip"/>
@@ -94,7 +93,7 @@ export function CalendarOverviewCard() {
             tooltipDataAttrs={(value: any) => {
                 return value.date ? {
                     'data-tooltip-id': `calendar-tooltip`,
-                    'data-tooltip-content': value.count ?`${dFns.format(value.date, 'EEE do')}: ${value.count.toFixed(2)} hours` : `${dFns.format(value.date, 'EEE do')}`
+                    'data-tooltip-content': value.count ? `${dFns.format(value.date, 'EEE do')}: ${value.count.toFixed(2)} hours` : `${dFns.format(value.date, 'EEE do')}`
                 } : undefined
             }}
         />

src/app/layout.tsx

@@ -5,8 +5,8 @@ import './globals.css'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: 'Work Tracker',
-  description: 'Generated by create next app',
+  description: 'Track time spent on different subjects',
 }
 
 export default function RootLayout({

src/app/overviewConfig.ts

@@ -0,0 +1,40 @@
+export interface OverviewConfig {
+    title: string,
+
+    subjects: {
+        title?: string,
+        projectId: number,
+    }[],
+
+    goalHours: number,
+
+    timePeriod: {
+        start: string,
+        end: string
+    },
+}
+
+export const semester1Revision: OverviewConfig = {
+    title: 'Semester 1 Revision',
+    goalHours: 4,
+    subjects: [
+        {
+            projectId: 195482340,
+        },
+        {
+            title: 'Measure Theory',
+            projectId: 195519024,
+        },
+        {
+            title: 'Quantum Mechanics',
+            projectId: 195518593,
+        },
+        {
+            projectId: 195754611,
+        }
+    ],
+    timePeriod: {
+        start: "2023-12-15T00:00:00.000Z",
+        end: "2024-01-25T00:00:00.000Z"
+    }
+}

src/app/page.tsx

@@ -1,35 +1,6 @@
-import {SubjectComparisonCard, SubjectOverviewCard} from "@/app/a.client";
+import OverviewPage from "@/app/OverviewPage";
-import {CalendarOverviewCard, projectIds} from "@/app/calendarOverviewCard";
+import {semester1Revision} from "@/app/overviewConfig";
 
 export default function Home() {
-    return (
+    return <OverviewPage config={semester1Revision}/>
-        <main className="m-6">
-            <h1 className="text-3xl font-semibold text-slate-900 dark:text-white my-2">Revision Tracker</h1>
-
-            <div className="grid gap-5 grid-cols-1 sm:grid-cols-4">
-                <SubjectOverviewCard
-                    projectId={195482340}
-                />
-
-                <SubjectOverviewCard
-                    title='Measure Theory'
-                    projectId={195519024}
-                />
-
-                <SubjectOverviewCard
-                    title='Quantum Mechanics'
-                    projectId={195518593}
-                />
-
-                <SubjectOverviewCard
-                    projectId={195754611}
-                />
-
-                <CalendarOverviewCard/>
-
-                <SubjectComparisonCard projectIds={projectIds}/>
-            </div>
-        </main>
-
-    )
 }

src/app/sem2/page.tsx

@@ -0,0 +1,32 @@
+import OverviewPage from "@/app/OverviewPage";
+import {OverviewConfig} from "@/app/overviewConfig";
+
+const semester2: OverviewConfig = {
+    title: 'Semester 2',
+    goalHours: 4,
+    subjects: [
+        {
+            projectId: 195754611,
+        },
+        {
+            projectId: 199383703,
+        },
+        {
+            projectId: 199383691,
+        },
+        {
+            projectId: 198859760,
+        },
+        {
+            projectId: 199383698,
+        },
+    ],
+    timePeriod: {
+        start: "2024-02-03T00:00:00.000Z",
+        end: "2024-05-10T00:00:00.000Z"
+    }
+}
+
+export default function Home() {
+    return <OverviewPage config={semester2}/>
+}