Fix some build errors

src/components/Sidebar.tsx

@@ -10,10 +10,10 @@ const Sidebar = async () => {
   if (session.session === null) return null;
 
   return (
-    <aside className="h-screen min-w-52 bg-muted hidden md:block p-4 pt-8 border-r border-border shadow-inner">
-      <div className="flex flex-col justify-between h-full">
+    <aside className="hidden h-screen min-w-52 border-r border-border bg-muted p-4 pt-8 shadow-inner md:block">
+      <div className="flex h-full flex-col justify-between">
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold ml-4">Logo</h3>
+          <h3 className="ml-4 text-lg font-semibold">Logo</h3>
           <SidebarItems />
         </div>
         <UserDetails session={session} />
@@ -32,19 +32,19 @@ const UserDetails = ({ session }: { session: AuthSession }) => {
 
   return (
     <Link href="/account">
-      <div className="flex items-center justify-between w-full border-t border-border pt-4 px-2">
+      <div className="flex w-full items-center justify-between border-t border-border px-2 pt-4">
         <div className="text-muted-foreground">
           <p className="text-xs">{user.name ?? "John Doe"}</p>
-          <p className="text-xs font-light pr-4">
+          <p className="pr-4 text-xs font-light">
             {user.email ?? "john@doe.com"}
           </p>
         </div>
         <Avatar className="h-10 w-10">
-          <AvatarFallback className="border-border border-2 text-muted-foreground">
+          <AvatarFallback className="border-2 border-border text-muted-foreground">
             {user.name
               ? user.name
                   ?.split(" ")
-                  .map((word) => word[0].toUpperCase())
+                  .map((word) => word[0]?.toUpperCase())
                   .join("")
               : "~"}
           </AvatarFallback>

src/components/children/add-child-component.tsx

@@ -1,31 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Icons } from "../icons";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import AddChildForm from "../forms/add-child-form";
-const AddChildComponent = () => {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant={"default"} size={"sm"}>
-          <Icons.add className="mr-2 h-4 w-4" /> Add child
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <AddChildForm />
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AddChildComponent;

src/components/children/children-filter.tsx

@@ -14,7 +14,6 @@ const ChildrenFilter: React.FC<ChildrenFilterProps> = ({ children }) => {
   return (
     <div className="flex flex-row items-center justify-center space-x-2">
       <ChildSelectList children={children} />
-      {/* <AddChildComponent /> */}
     </div>
   );
 };

src/components/children/children-list.tsx

@@ -1,5 +1,5 @@
-'use client';
-import React from 'react';
+"use client";
+import React from "react";
 import {
   Table,
   TableBody,
@@ -8,15 +8,15 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table';
-import { Button } from '@/components/ui/button';
-import { Icons } from '../icons';
-import ConnectDeviceDialog from './connect-device-dialog';
-import type ChildModel from '@/lib/models/child';
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Icons } from "../icons";
+import ConnectDeviceDialog from "./connect-device-dialog";
+import { type CompleteChild } from "@/server/db/schema/children";
 
 type ChildrenListProps = {
-  kids: ChildModel[];
-}
+  kids: CompleteChild[];
+};
 const ChildrenList: React.FC<ChildrenListProps> = ({ kids }) => {
   return (
     <Table>
@@ -37,7 +37,7 @@ const ChildrenList: React.FC<ChildrenListProps> = ({ kids }) => {
               <div className="space-x-1">
                 <ConnectDeviceDialog child={kid} />
                 <Button>
-                  <Icons.edit className="w-4 h-4 mr-2" />
+                  <Icons.edit className="mr-2 h-4 w-4" />
                 </Button>
               </div>
             </TableCell>

src/components/main-nav.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import { Icons } from "@/components/icons";
-import { type NavItem } from "@/lib/types/nav";
+import { type NavItem } from "@/lib/models/types/nav-item";
 
 interface MainNavProps {
   items?: NavItem[];
@@ -19,19 +19,18 @@ export function MainNav({ items }: MainNavProps) {
       </Link>
       {items?.length ? (
         <nav className="flex gap-6">
-          {items?.map(
-            (item: NavItem, index) =>
-              <Link
-                key={index}
-                href={item.href}
-                className={cn(
-                  "flex items-center text-sm font-medium text-muted-foreground",
-                  item.disabled && "cursor-not-allowed opacity-80",
-                )}
-              >
-                {item.title}
-              </Link>
-          )}
+          {items?.map((item: NavItem, index) => (
+            <Link
+              key={index}
+              href={item.href}
+              className={cn(
+                "flex items-center text-sm font-medium text-muted-foreground",
+                item.disabled && "cursor-not-allowed opacity-80",
+              )}
+            >
+              {item.title}
+            </Link>
+          ))}
         </nav>
       ) : null}
     </div>

src/lib/models/types/nav-item.ts

@@ -0,0 +1,6 @@
+export type NavItem = {
+  title: string;
+  href: string;
+  disabled?: boolean;
+  external?: boolean;
+};