Merge pull request #56 from kmchandler/rework-dash

Rework dash

app/pufflings/family/[id]/child/[childId]/childNavigation.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Link from "next/link";
+import { ChevronDownIcon } from '@heroicons/react/16/solid'
+import { usePathname } from "next/navigation"; // usePathname is a hook now imported from navigation
+import { useRouter } from 'next/navigation'
+
+const tabs = [
+  { name: 'Dashboard', href: 'dashboard', current: true },
+  { name: 'Feeds', href: 'feeds', current: false },
+  { name: 'Diapers', href: 'diapers', current: false },
+  { name: 'Sleeps', href: 'sleeps', current: false },
+  { name: 'Medical', href: 'medical', current: false },
+]
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const ChildNavigation = ({ childId, familyId, childInfo}: {childId: string, familyId: string, childInfo: any}) => {
+  const pathName = usePathname();
+  const router = useRouter();
+
+  const tabChange = (e: any) => {
+    const newRoute = e.target.value.toLowerCase();
+    router.push(`/pufflings/family/${familyId}/child/${childId}/${newRoute}`)
+  }
+
+  return (
+    <div className="border-b border-gray-200 pb-5 sm:pb-0">
+      <h1 className="text-2xl font-semibold text-gray-900">{childInfo?.name?.toLowerCase()}</h1>
+      <div className="mt-3 sm:mt-4">
+        <div className="grid grid-cols-1 sm:hidden">
+          {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
+          <select
+            defaultValue={tabs.find((tab) => pathName.includes(tab.href))?.href}
+            aria-label="Select a tab"
+            onChange={tabChange}
+            className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+          >
+            {tabs.map((tab) => (
+              <option key={tab.name} value={tab.href}>{tab.name}</option>
+            ))}
+          </select>
+          <ChevronDownIcon
+            aria-hidden="true"
+            className="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
+          />
+        </div>
+        <div className="hidden sm:block">
+          <nav className="-mb-px flex space-x-8">
+            {tabs.map((tab) => (
+              <Link
+                key={tab.name}
+                href={`/pufflings/family/${familyId}/child/${childId}/${tab.href}`}
+                aria-current={pathName.includes(tab.href) ? 'page' : undefined}
+                className={classNames(
+                  pathName.includes(tab.href)
+                    ? 'text-oxford-blue border-oxford-blue'
+                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                  'whitespace-nowrap border-b-2 px-1 pb-4 text-xl font-medium',
+                )}
+              >
+                {tab.name}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChildNavigation;

app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx

@@ -0,0 +1,20 @@
+import Recents from "@/app/ui/recents";
+import { getChildDashboard, LastDiaper, LastFeed, LastSleep } from "@/lib/dashboard";
+
+const Dashboard = async ({ params: { childId, id }}: {params: { childId: string, id: string }}) => {
+
+  const {
+    lastFeed,
+    lastSleep,
+    lastDiaper
+} = await getChildDashboard(parseInt(childId))
+
+
+  return (
+    <>
+      <Recents familyId={id} childId={childId} lastFeed={lastFeed as LastFeed} lastSleep={lastSleep as LastSleep} lastDiaper={lastDiaper as LastDiaper} />
+    </>
+  )
+}
+
+export default Dashboard

app/pufflings/family/[id]/child/[childId]/diapers/page.tsx

@@ -17,7 +17,7 @@ export default async function Diapers ({ params: { childId, id }}: {params: { ch
   const poopIcon = <FontAwesomeIcon icon={faPoop} />
 
   return (
-      <div className="mt-36 flex flex-col">
+      <div className="mt-5 flex flex-col">
         <div className="self-center text-6xl text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
           diapers
         </div>

app/pufflings/family/[id]/child/[childId]/feeds/page.tsx

@@ -15,7 +15,7 @@ export default async function Feeds (
   const [feedInfo, count]: [feed[], number] = await getPagedFeeds(parseInt(childId), pageParam)
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col mt-5">
       <div className="text-6xl self-center text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
         Feeds
       </div>

app/pufflings/family/[id]/child/[childId]/layout.tsx

@@ -0,0 +1,22 @@
+import { getChild } from "@/lib/child";
+import ChildNavigation from "./childNavigation";
+
+export default async function ChildLayout({
+    children,
+    params: { childId, id }
+  }: {
+
+    children: React.ReactNode;
+    params: { childId: string, id: string }  }) {
+
+    console.log(childId)
+
+    const childInfo = await getChild(parseInt(childId))
+
+    return (
+        <div className="px-5 sm:px-20">
+          <ChildNavigation childId={childId} familyId={id} childInfo={childInfo} />
+          {children}
+        </div>
+    )
+}

app/pufflings/family/[id]/child/[childId]/loading.tsx

@@ -1,5 +1,5 @@
 import Loading from "@/app/loading";
 
-const PageLoading = () => <Loading />
+const PageLoading = () => <div className="mt-5"><Loading /></div>
 
 export default PageLoading

app/pufflings/family/[id]/child/[childId]/medical/page.tsx

@@ -12,7 +12,7 @@ export default async function Medicals ({ params: { childId, id }}: {params: { c
 
   return (
     <div>
-      <div className="mt-36 flex flex-col">
+      <div className="mt-5 flex flex-col">
         <div className="text-6xl self-center text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
           medical
         </div>

app/pufflings/family/[id]/child/[childId]/page copy.tsx

@@ -0,0 +1,70 @@
+import { getChild } from "@/lib/child";
+import Link from "next/link";
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHouseChimneyMedical, faMoon } from '@fortawesome/free-solid-svg-icons'
+import { BabyBottleIcon } from "hugeicons-react";
+import { DiaperIcon } from "hugeicons-react";
+import DeleteButton from '../../../../../ui/deleteButton'
+
+export default async function Child ({ params: { childId, id }}: {params: { childId: string, id: string }}) {
+
+  const childInfo = await getChild(parseInt(childId))
+
+  const diaperIcon = <DiaperIcon color="oxford-blue" size="99" />
+  const feedIcon = <BabyBottleIcon color="oxford-blue" size="99" />
+  const medicalIcon = <FontAwesomeIcon icon={faHouseChimneyMedical} />
+  const sleepIcon = <FontAwesomeIcon icon={faMoon} />
+
+const activities = [
+  {
+    url: `/pufflings/family/${id}/child/${childId}/diapers`,
+    icon: diaperIcon,
+    label: 'diapers'
+  },
+  {
+    url:`/pufflings/family/${id}/child/${childId}/sleeps`,
+    icon: sleepIcon,
+    label: 'sleeps'
+  },
+  {
+    url:`/pufflings/family/${id}/child/${childId}/feeds`,
+    icon: feedIcon,
+    label: 'feeds'
+  },
+  {
+    url:`/pufflings/family/${id}/child/${childId}/medical`,
+    icon: medicalIcon,
+    label: 'medical'
+  }
+]
+
+
+  return (
+    <div className="flex flex-col mt-8">
+      <div className="text-6xl flex justify-center">
+        <span className="text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] mb-5">{childInfo?.name.toLocaleLowerCase()}</span>
+      </div>
+      <Link href={`/pufflings/family/${id}/child/${childId}/profile`} className="text-oxford-blue py-2 px-4 rounded shadow outline outline-1 outline-oxford-blue rounded transition hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl mt-1 w-fit flex place-self-center">view {childInfo?.name.toLocaleLowerCase()}&apos;s profile</Link>
+      <div className="flex flex-row flex-wrap justify-center md:space-x-10">
+        {activities.map(activity => {
+          return (
+            <div key={`label_${activity.label}`}>
+              <Link href={activity.url} className="text-oxford-blue py-2 px-4 rounded shadow flex flex-col bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl mt-7">
+                <div className="min-w-[180px] flex flex-col">
+                  <div className="self-center text-8xl mt-6">
+                    {activity.icon}
+                  </div>
+                  <div className="self-center text-4xl mb-3 mt-1 ">
+                    {activity.label}
+                  </div>
+                </div>
+              </Link>
+            </div>
+          )
+        })} 
+      </div>
+      <DeleteButton childId={childId} familyId={id} />
+    </div>
+  );
+};

app/pufflings/family/[id]/child/[childId]/page.tsx

@@ -1,70 +1,6 @@
-import { getChild } from "@/lib/child";
-import Link from "next/link";
-import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHouseChimneyMedical, faMoon } from '@fortawesome/free-solid-svg-icons'
-import { BabyBottleIcon } from "hugeicons-react";
-import { DiaperIcon } from "hugeicons-react";
-import DeleteButton from '../../../../../ui/deleteButton'
+import { redirect } from 'next/navigation';
+const ChildPage = async ({ params: { childId, id }}: {params: { childId: string, id: string }}) => {
+  redirect(`/pufflings/family/${id}/child/${childId}/dashboard`)
+}
 
-export default async function Child ({ params: { childId, id }}: {params: { childId: string, id: string }}) {
-
-  const childInfo = await getChild(parseInt(childId))
-
-  const diaperIcon = <DiaperIcon color="oxford-blue" size="99" />
-  const feedIcon = <BabyBottleIcon color="oxford-blue" size="99" />
-  const medicalIcon = <FontAwesomeIcon icon={faHouseChimneyMedical} />
-  const sleepIcon = <FontAwesomeIcon icon={faMoon} />
-
-const activities = [
-  {
-    url: `/pufflings/family/${id}/child/${childId}/diapers`,
-    icon: diaperIcon,
-    label: 'diapers'
-  },
-  {
-    url:`/pufflings/family/${id}/child/${childId}/sleeps`,
-    icon: sleepIcon,
-    label: 'sleeps'
-  },
-  {
-    url:`/pufflings/family/${id}/child/${childId}/feeds`,
-    icon: feedIcon,
-    label: 'feeds'
-  },
-  {
-    url:`/pufflings/family/${id}/child/${childId}/medical`,
-    icon: medicalIcon,
-    label: 'medical'
-  }
-]
-
-
-  return (
-    <div className="flex flex-col mt-8">
-      <div className="text-6xl flex justify-center">
-        <span className="text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] mb-5">{childInfo?.name.toLocaleLowerCase()}</span>
-      </div>
-      <Link href={`/pufflings/family/${id}/child/${childId}/profile`} className="text-oxford-blue py-2 px-4 rounded shadow outline outline-1 outline-oxford-blue rounded transition hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl mt-1 w-fit flex place-self-center">view {childInfo?.name.toLocaleLowerCase()}&apos;s profile</Link>
-      <div className="flex flex-row flex-wrap justify-center md:space-x-10">
-        {activities.map(activity => {
-          return (
-            <div key={`label_${activity.label}`}>
-              <Link href={activity.url} className="text-oxford-blue py-2 px-4 rounded shadow flex flex-col bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl mt-7">
-                <div className="min-w-[180px] flex flex-col">
-                  <div className="self-center text-8xl mt-6">
-                    {activity.icon}
-                  </div>
-                  <div className="self-center text-4xl mb-3 mt-1 ">
-                    {activity.label}
-                  </div>
-                </div>
-              </Link>
-            </div>
-          )
-        })} 
-      </div>
-      <DeleteButton childId={childId} familyId={id} />
-    </div>
-  );
-};
+export default ChildPage

app/pufflings/family/[id]/child/[childId]/sleeps/page.tsx

@@ -14,7 +14,7 @@ export default async function Sleeps ({ params: { childId, id }}: {params: { chi
   await lastCreatedSleep(childId);
 
   return (
-    <div className="mt-36 flex flex-col items-center">
+    <div className="mt-5 flex flex-col items-center">
       <div className="text-6xl text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
         sleeps
       </div>

app/ui/recents.tsx

@@ -0,0 +1,77 @@
+'use client'; 
+
+import { LastDiaper, LastFeed, LastSleep } from "@/lib/dashboard";
+import Link from "next/link"
+
+
+const Recents =  ({ familyId, childId, lastFeed, lastSleep, lastDiaper }: { familyId: string, childId: string, lastFeed: LastFeed, lastSleep: LastSleep, lastDiaper: LastDiaper}) => {
+    return (
+        <>
+            <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
+                <div className="overflow-hidden rounded-lg bg-white shadow">
+                    <div className="flex px-4 py-5 sm:p-6">
+                        <div className="flex flex-col text-left left-0">
+                            <dt className="truncate text-sm font-medium text-gray-500">last feed</dt>
+                            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastFeed?.timeSince} hrs ago</dd>
+                        </div>
+                        <div className="flex grow">&nbsp;</div>
+                        <div className="flex flex-col text-right right-0">
+                            <dt className="truncate text-sm font-medium text-gray-500">amount</dt>
+                            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{2} oz</dd>
+                        </div>
+                    </div>
+                    <div className="bg-tea-green">
+                        <Link href={`/pufflings/family/${familyId}/child/${childId}/feeds/startFeed`} 
+                        className="text-oxford-blue py-1 px-2 text-center rounded hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl flex flex-col mt-3 w-26 self-center">
+                            start new feed
+                        </Link>
+                    </div>
+                </div>
+
+                <div className="overflow-hidden rounded-lg bg-white shadow">
+                    <div className="flex px-4 py-5 sm:p-6">
+                        <div className="flex flex-col text-left left-0">
+                            <dt className="truncate text-sm font-medium text-gray-500">last diaper</dt>
+                            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastDiaper?.timeSince} hrs ago</dd>
+                        </div>
+                        <div className="flex grow">&nbsp;</div>
+                        <div className="flex flex-col text-right right-0">
+                            <dt className="truncate text-sm font-medium text-gray-500">type</dt>
+                            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastDiaper?.type}</dd>
+                        </div>
+                    </div>
+
+                    <div className="bg-tea-green">
+                        <Link href={`/pufflings/family/${familyId}/child/${childId}/diapers/addDiaper`} 
+                        className="text-oxford-blue py-1 px-2 text-center rounded hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl flex flex-col mt-3 w-26 self-center">
+                            add diaper
+                        </Link>
+                    </div>
+                </div>
+
+                <div className="overflow-hidden rounded-lg bg-white shadow">
+                    <div className="flex px-4 py-5 sm:p-6">
+                        <div className="flex flex-col text-left left-0">
+                            <dt className="truncate text-sm font-medium text-gray-500">last sleep start</dt>
+                            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastSleep?.start_time.toLocaleTimeString()}</dd>
+                        </div>
+                        <div className="flex grow">&nbsp;</div>
+                        <div className="flex flex-col text-right right-0">
+                            <dt className="truncate text-sm font-medium text-gray-500">last sleep end</dt>
+                            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastSleep?.end_time?.toLocaleTimeString()}</dd>
+                        </div>
+                    </div>
+
+                    <div className="bg-tea-green">
+                        <Link href={`/pufflings/family/${familyId}/child/${childId}/sleeps/startSleep`} 
+                        className="text-oxford-blue py-1 px-2 text-center rounded hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl flex flex-col mt-3 w-26 self-center">
+                            start new sleep
+                        </Link>
+                    </div>
+                </div>
+            </dl>
+        </>
+    )
+}
+
+export default Recents