v0.0.7

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Habit Watcher",
-    "version": "0.0.6"
+    "version": "0.0.7"
   },
   "tauri": {
     "allowlist": {

src/components/Common/HabitLoading.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from "@mantine/core";
+
+export const HabitLoading = () => {
+	return (
+		<div>
+			<Skeleton height={40} />
+			<Skeleton my="md" height={60} />
+			<Skeleton my="md" height={80} />
+			<Skeleton height={20} />
+		</div>
+	);
+};

src/components/Home/HabbitCard.tsx

@@ -3,6 +3,7 @@ import { showNotification } from "@mantine/notifications";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import Calendar from "react-github-contribution-calendar";
+import { useNavigate } from "react-router-dom";
 import { useConfetti } from "../../hooks/useConfetti";
 import { Habbit, HabbitView } from "../../models/habbit";
 import { checkHabbit, deleteHabbit } from "../../services/storage";
@@ -48,6 +49,7 @@ export const HabbitCard = (view: HabbitCardProps) => {
 	} = useConfetti()
 	const client = useQueryClient()
 	const { classes } = useStyles();
+	const navigate = useNavigate()
 
 
 	const [checked, setChecked] = React.useState(view.isChecked);
@@ -57,11 +59,6 @@ export const HabbitCard = (view: HabbitCardProps) => {
 		onSuccess: (data) => {
 			client.invalidateQueries(["fetchAllHabbits"])
 			setShowing(data.confetti)
-			showNotification({
-				title: "Success",
-				message: data.message,
-				color: "teal",
-			})
 		},
 		onError: () => {
 			showNotification({
@@ -97,46 +94,51 @@ export const HabbitCard = (view: HabbitCardProps) => {
 
 	return (
 		<Card withBorder={true} p="md"	>
-			<Group position="apart">
-				<Text weight="bold" size="lg"
-					strikethrough={checked}
-				>
-					{view.habbit.name}
-				</Text>
-				<div>
-					<Group spacing={0} position="right">
-
-						<Menu trigger="hover" openDelay={100} closeDelay={400} position="bottom-end">
-							<Menu.Target>
-								<svg className={classes.icon} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" >
-									<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
-								</svg>
-
-							</Menu.Target>
-
-							<Menu.Dropdown>
-								<Menu.Item
-									onClick={() => {
-										view.setHabbit(view.habbit)
-										view.setIsOpen(true)
-									}}
-								>
-									Rename Habbit
-								</Menu.Item>
-								<Menu.Divider />
-								<Menu.Label
-
-								>Danger zone</Menu.Label>
-								<Menu.Item color="red" onClick={() => {
-									deleteHabbitMutation(view.habbit.id)
-								}}>
-									Remove Habbit
-								</Menu.Item>
-							</Menu.Dropdown>
-						</Menu>
-					</Group>
-				</div>
-			</Group>
+			<Card.Section withBorder={true} inheritPadding={true} py="xs">
+				<Group position="apart">
+					<Text weight="bold" size="lg"
+						strikethrough={checked}
+					>
+						{view.habbit.name}
+					</Text>
+					<div>
+						<Group spacing={0} position="right">
+
+							<Menu withArrow={true} withinPortal={true} trigger="hover" openDelay={100} closeDelay={400} position="bottom-end">
+								<Menu.Target>
+									<svg className={classes.icon} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+										<path strokeLinecap="round" strokeLinejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+									</svg>
+								</Menu.Target>
+								<Menu.Dropdown>
+									<Menu.Item
+									onClick={() => navigate(`/summary/${view.habbit.id}`)}
+									>
+										Summary
+									</Menu.Item>
+									<Menu.Item
+										onClick={() => {
+											view.setHabbit(view.habbit)
+											view.setIsOpen(true)
+										}}
+									>
+										Rename Habbit
+									</Menu.Item>
+									<Menu.Divider />
+									<Menu.Label
+
+									>Danger zone</Menu.Label>
+									<Menu.Item color="red" onClick={() => {
+										deleteHabbitMutation(view.habbit.id)
+									}}>
+										Remove Habbit
+									</Menu.Item>
+								</Menu.Dropdown>
+							</Menu>
+						</Group>
+					</div>
+				</Group>
+			</Card.Section>
 			<Group position="apart" my="md">
 				{
 					view.stats.map((stat) => (<HabbitCardStats key={stat.name} label={stat.name} value={stat.value} />))
@@ -150,16 +152,18 @@ export const HabbitCard = (view: HabbitCardProps) => {
 				panelAttributes={undefined}
 				panelColors={panelColors}
 			/>
-			<Divider my="sm" />
-			<Checkbox color="teal" size="lg"
-				checked={checked}
-				width="100%"
-				label={checked ? "Done today" : "Mark as done"}
-				onChange={(e) => {
-					setChecked(e.currentTarget.checked);
-					checkHabbitMutation(view.habbit.id);
-				}}
-			/>
+			<Card.Section withBorder={true} inheritPadding={true} py="xs">
+				<Checkbox color="teal" radius="xl"
+					size="xl"
+					checked={checked}
+					width="100%"
+					label={checked ? "Done today" : "Mark as done"}
+					onChange={(e) => {
+						setChecked(e.currentTarget.checked);
+						checkHabbitMutation(view.habbit.id);
+					}}
+				/>
+			</Card.Section>
 		</Card>
 	);
 };

src/components/Home/HabbitList.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Habbit } from "../../models/habbit";
 import React from "react";
 import { UpdaetHabit } from "./UpdateHabit";
+import { HabitLoading } from "../Common/HabitLoading";
 
 export const HabbitList = () => {
 	const fetchHabbit = async () => {
@@ -14,25 +15,13 @@ export const HabbitList = () => {
 
 	const { data, status } = useQuery(["fetchAllHabbits"], fetchHabbit);
 
-
-	const [habbit, setHabbit] = React.useState<Habbit | null>(null)
+	const [habbit, setHabbit] = React.useState<Habbit | null>(null);
 	const [open, setOpen] = React.useState(false);
-
-
 	return (
 		<>
-
-			{
-				status === "loading" ? (<div>
-					<Skeleton height={40} />
-					<Skeleton my="md" height={60} />
-					<Skeleton my="md" height={80} />
-					<Skeleton height={20} />
-				</div>) : null
-			}
-			{
-				status === "success" ? <ScrollArea mt="lg">
-
+			{status === "loading" ? <HabitLoading /> : null}
+			{status === "success" ? (
+				<ScrollArea mt="lg">
 					<SimpleGrid
 						cols={2}
 						spacing="lg"
@@ -42,37 +31,38 @@ export const HabbitList = () => {
 							{ maxWidth: 600, cols: 1, spacing: "sm" },
 						]}
 					>
-						{
-						}
-						{
-							data.length > 0 ? data.map((habbit) => (<HabbitCard key={habbit.habbit.id} {...habbit}
-								setHabbit={setHabbit}
-								setIsOpen={setOpen}
-							/>))
-								: <Text>
-									Oh no! You don't have any habbits yet. Create one now!
-								</Text>
-						}
+						{ }
+						{data.length > 0 ? (
+							data.map((habbit) => (
+								<HabbitCard
+									key={habbit.habbit.id}
+									{...habbit}
+									setHabbit={setHabbit}
+									setIsOpen={setOpen}
+								/>
+							))
+						) : (
+							<Text>
+								Oh no! You don't have any habbits yet. Create one now!
+							</Text>
+						)}
 					</SimpleGrid>
 					<Modal
 						opened={open}
 						onClose={() => setOpen(false)}
 						title="Update Habit"
 					>
-						{
-							habbit ? <UpdaetHabit {...habbit} onFinish={() => setOpen(false)} /> : null
-						}
+						{habbit ? (
+							<UpdaetHabit {...habbit} onFinish={() => setOpen(false)} />
+						) : null}
 					</Modal>
-				</ScrollArea> : null
-			}
-			{
-				status === "error" ? (<div>
-					<Text>
-						There was an error fetching your habbits
-					</Text>
+				</ScrollArea>
+			) : null}
+			{status === "error" ? (
+				<div>
+					<Text>There was an error fetching your habbits</Text>
 				</div>
-				) : null
-			}
+			) : null}
 		</>
 	);
 };

src/components/Summary/SummartStatsCard.tsx

@@ -0,0 +1,31 @@
+import { Group, Paper, Text, createStyles } from "@mantine/core";
+import { HabbitStats } from "../../models/habbit";
+
+const useStyles = createStyles((theme) => ({
+    statsValue: {
+        fontSize: 40,
+    }
+}))
+
+export const SummaryStatsCard = (stat: HabbitStats) => {
+    const { classes } = useStyles()
+    return (
+        <Paper withBorder={true} p="md" radius="md">
+            <Group position="apart">
+                <div>
+                    <Text
+                        color="dimmed"
+                        transform="uppercase"
+                        weight={700}
+                        size="sm"
+                    >
+                        {stat.name}
+                    </Text>
+                    <Text weight="bold" className={classes.statsValue}>
+                        {stat.value}
+                    </Text>
+                </div>
+            </Group>
+        </Paper>
+    );
+};

src/components/Summary/index.tsx

@@ -0,0 +1,59 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { getHabitByID } from "../../services/storage";
+import { createStyles, Group, Paper, Text, ThemeIcon, SimpleGrid } from '@mantine/core';
+import { HabitLoading } from "../Common/HabitLoading";
+import { SummaryStatsCard } from "./SummartStatsCard";
+import { BackBtn } from "../Common/BackBtn";
+const useStyles = createStyles((theme) => ({
+    root: {
+        padding: theme.spacing.xl * 1.5,
+    },
+}));
+
+
+export const SummaryBody = () => {
+    const { classes } = useStyles();
+    const params = useParams()
+    const navigate = useNavigate()
+
+    const fetchData = async () => {
+        const id = params.id as string
+        const response = await getHabitByID(+id)
+        return response
+    }
+
+    const { data, status } = useQuery(['fetchHabitByID', params.id], fetchData, {
+        refetchOnWindowFocus: false,
+        enabled: Boolean(params.id),
+        onError: () => navigate('/')
+    })
+
+
+    return (
+        <div>
+            {status === "loading" ? <HabitLoading /> : null}
+            {status === "error" ? <Text>Something went wrong</Text> : null}
+            {status === "success" ? (
+                <div className={classes.root}>
+
+
+                    <Group>
+                        <BackBtn />
+                            <Text size="xl" weight={700} mb="md">
+                                {data.habbit.name}
+                            </Text>
+                    </Group>
+
+
+                    <SimpleGrid cols={3} breakpoints={[{ maxWidth: 'sm', cols: 1 }]}>
+                        {
+                            data.stats.map((stat, i) => (<SummaryStatsCard key={i} {...stat} />))
+                        }
+                    </SimpleGrid>
+                </div>
+            ) : null}
+        </div>
+    )
+}

src/main.tsx

@@ -10,6 +10,7 @@ import { NewHabitPage } from "./new-habit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NotificationsProvider } from "@mantine/notifications";
 import { ConfettiProvider } from "./hooks/useConfetti";
+import { SummaryPage } from "./summary";
 const queryClient = new QueryClient();
 const router = createBrowserRouter([
 	{
@@ -21,6 +22,10 @@ const router = createBrowserRouter([
 				path: "/new",
 				element: <NewHabitPage />,
 			},
+			{
+				path: "/summary/:id",
+				element: <SummaryPage />
+			}
 		],
 		errorElement: <ErrorPage />,
 	},