fix bugs, redo layout, reorg.

17 files changed, 127 insertions, 98 deletions

diff --git a/api/go.mod b/api/go.mod
index 6c414bc..06f7b7e 100644
--- a/api/go.mod
+++ b/api/go.mod
@@ -4,8 +4,8 @@ go 1.18
 
 require (
         github.com/gin-gonic/gin v1.9.1
+        github.com/glebarez/go-sqlite v1.22.0
         github.com/google/uuid v1.6.0
-        github.com/mattn/go-sqlite3 v1.14.22
         github.com/spf13/viper v1.18.2
         github.com/stretchr/testify v1.8.4
         golang.org/x/crypto v0.19.0
@@ -16,6 +16,7 @@ require (
         github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d // indirect
         github.com/chenzhuoyu/iasm v0.9.1 // indirect
         github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc // indirect
+        github.com/dustin/go-humanize v1.0.1 // indirect
         github.com/fsnotify/fsnotify v1.7.0 // indirect
         github.com/gabriel-vasile/mimetype v1.4.3 // indirect
         github.com/gin-contrib/sse v0.1.0 // indirect
@@ -34,6 +35,7 @@ require (
         github.com/modern-go/reflect2 v1.0.2 // indirect
         github.com/pelletier/go-toml/v2 v2.1.1 // indirect
         github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect
+        github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
         github.com/sagikazarmark/locafero v0.4.0 // indirect
         github.com/sagikazarmark/slog-shim v0.1.0 // indirect
         github.com/sourcegraph/conc v0.3.0 // indirect
@@ -53,4 +55,8 @@ require (
         google.golang.org/protobuf v1.32.0 // indirect
         gopkg.in/ini.v1 v1.67.0 // indirect
         gopkg.in/yaml.v3 v3.0.1 // indirect
+        modernc.org/libc v1.37.6 // indirect
+        modernc.org/mathutil v1.6.0 // indirect
+        modernc.org/memory v1.7.2 // indirect
+        modernc.org/sqlite v1.28.0 // indirect
 )
diff --git a/api/go.sum b/api/go.sum
index 20771f7..44afdf8 100644
--- a/api/go.sum
+++ b/api/go.sum
@@ -13,6 +13,8 @@ github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
 github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
@@ -22,6 +24,8 @@ github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.9.1 h1:4idEAncQnU5cB7BeOkPtxjfCSye0AAm1R0RVIqJ+Jmg=
 github.com/gin-gonic/gin v1.9.1/go.mod h1:hPrL7YrpYKXt5YId3A/Tnip5kqbEAP+KLuI3SUcPTeU=
+github.com/glebarez/go-sqlite v1.22.0 h1:uAcMJhaA6r3LHMTFgP0SifzgXg46yJkgxqyuyec+ruQ=
+github.com/glebarez/go-sqlite v1.22.0/go.mod h1:PlBIdHe0+aUEFn+r2/uthrWq4FxbzugL0L8Li6yQJbc=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
@@ -33,6 +37,7 @@ github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
 github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
 github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/hashicorp/hcl v1.0.0 h1:0Anlzjpi4vEasTeNFn2mLJgTSwt0+6sfsiTG8qcWGx4=
@@ -51,8 +56,6 @@ github.com/magiconair/properties v1.8.7 h1:IeQXZAiQcpL9mgcAe1Nu6cX9LLw6ExEHKjN0V
 github.com/magiconair/properties v1.8.7/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
-github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -65,6 +68,8 @@ github.com/pelletier/go-toml/v2 v2.1.1/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdU
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
 github.com/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
 github.com/sagikazarmark/locafero v0.4.0 h1:HApY1R9zGo4DBgr7dqsTH/JJxLTTsOt7u6keLGt6kNQ=
 github.com/sagikazarmark/locafero v0.4.0/go.mod h1:Pe1W6UlPYUk/+wc/6KFhbORCfqzgYEpgQ3O5fPuL3H4=
@@ -124,5 +129,13 @@ gopkg.in/ini.v1 v1.67.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+modernc.org/libc v1.37.6 h1:orZH3c5wmhIQFTXF+Nt+eeauyd+ZIt2BX6ARe+kD+aw=
+modernc.org/libc v1.37.6/go.mod h1:YAXkAZ8ktnkCKaN9sw/UDeUVkGYJ/YquGO4FTi5nmHE=
+modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
+modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
+modernc.org/memory v1.7.2 h1:Klh90S215mmH8c9gO98QxQFsY+W451E8AnzjoE2ee1E=
+modernc.org/memory v1.7.2/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
+modernc.org/sqlite v1.28.0 h1:Zx+LyDDmXczNnEQdvPuEfcFVA2ZPyaD7UCZDjef3BHQ=
+modernc.org/sqlite v1.28.0/go.mod h1:Qxpazz0zH8Z1xCFyi5GSL3FzbtZ3fvbjmywNogldEW0=
 nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
 rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=
diff --git a/api/internal/controllers/auth.go b/api/internal/controllers/auth.go
index b06c6ef..2599550 100644
--- a/api/internal/controllers/auth.go
+++ b/api/internal/controllers/auth.go
@@ -12,7 +12,7 @@ import (
 
         "water/api/internal/database"
 
-        _ "github.com/mattn/go-sqlite3"
+        _ "github.com/glebarez/go-sqlite"
         "golang.org/x/crypto/bcrypt"
 )
 
diff --git a/api/internal/database/database.go b/api/internal/database/database.go
index 1bfb789..8a54e4a 100644
--- a/api/internal/database/database.go
+++ b/api/internal/database/database.go
@@ -6,7 +6,7 @@ import (
         "path/filepath"
         "water/api/internal/config"
 
-        _ "github.com/mattn/go-sqlite3"
+        _ "github.com/glebarez/go-sqlite"
 )
 
 func EstablishDBConnection() (*sql.DB, error) {
diff --git a/db/sql/views.sql b/db/sql/views.sql
index c56286d..3ca2cf9 100644
--- a/db/sql/views.sql
+++ b/db/sql/views.sql
@@ -4,7 +4,7 @@ CREATE VIEW IF NOT EXISTS aggregated_stats AS
 CREATE VIEW IF NOT EXISTS `DailyUserStatistics` AS
 SELECT users.name, IFNULL(SUM(statistics.quantity), 0) as total, preferences.color as color
 FROM users
-LEFT JOIN statistics ON users.id = statistics.user_id AND DATE(statistics.date) = DATE('now', '-1 day')
+LEFT JOIN statistics ON users.id = statistics.user_id AND DATE(statistics.date) = DATE('now')
 LEFT JOIN preferences ON users.id = preferences.user_id
 GROUP BY users.name;
 
@@ -12,11 +12,11 @@ GROUP BY users.name;
 CREATE VIEW IF NOT EXISTS `WeeklyStatisticsView` AS
   WITH DateSequence(Dates) AS
     (
-     SELECT Date(CURRENT_DATE, '-7 day')
+     SELECT Date(CURRENT_DATE, '-6 day')
      UNION ALL
      SELECT Date(Dates, '+1 day')
      FROM DateSequence
-     WHERE Date(Dates, '+1 day') < Date(CURRENT_DATE)
+     WHERE Date(Dates, '+1 day') <= Date(CURRENT_DATE)
     )
 SELECT DateSequence.Dates as 'date',
   IFNULL(SUM(statistics.quantity), 0) AS 'total'
diff --git a/fe/src/App.svelte b/fe/src/App.svelte
index 25d53dc..11eb217 100644
--- a/fe/src/App.svelte
+++ b/fe/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Layout from "./lib/Layout.svelte";
-  import LoginForm from "./lib/LoginForm.svelte";
+  import { LoginForm } from './lib/forms';
   import DataView from "./lib/DataView.svelte";
   import { authenticated } from "./stores/auth";
 </script>
diff --git a/fe/src/app.css b/fe/src/app.css
index c24c713..be7d15c 100644
--- a/fe/src/app.css
+++ b/fe/src/app.css
@@ -5,48 +5,34 @@
 
     color-scheme: light dark;
     color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
+    background-color: var(--background);
+    width: 100vw;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
-    --submit: #28a745;
+    --background: #242424;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
+@media (min-width: 916px) {
+    :root {
+        width: unset;
+    }
 
-a:hover {
-    color: #535bf2;
+    #content div.column:first-child {
+        flex-direction: row;
+        height: 300px;
+    }
 }
 
 body {
     margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
-    min-height: 100vh;
+    padding: 0 2em 2em;
 }
 
-h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
-}
 
-.card {
-    padding: 2em;
-}
-
-#app {
-    flex-grow: 2;
-    max-width: 1280px;
-    margin: 0 auto;
-}
 
 button {
     border-radius: 8px;
@@ -56,6 +42,7 @@ button {
     font-weight: 500;
     font-family: inherit;
     background-color: #1a1a1a;
+    color: inherit;
     cursor: pointer;
     transition: border-color 0.25s;
 }
@@ -64,10 +51,6 @@ button:hover {
     border-color: #646cff;
 }
 
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
     :root {
@@ -84,12 +67,6 @@ button:focus-visible {
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        color: #000;
-    }
-}
-
 .form {
     display: flex;
     flex-direction: column;
@@ -118,3 +95,7 @@ button:focus-visible {
     background: var(--submit);
     color: #fff;
 }
+
+dialog {
+    top: 8em;
+}
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index cd1e02c..0f29279 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -11,13 +11,12 @@
 
 <style>
     .card {
-        background: #fff;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         border: solid 2px #00000066;
         border-radius: 0.25em;
-        height: var(--height, fit-content);
-        overflow-y: var(--overflow, initial);
+        height: var(--height, inherit);
+        flex-grow: 2;
     }
 </style>
diff --git a/fe/src/lib/Column.svelte b/fe/src/lib/Column.svelte
index f036073..6902edf 100644
--- a/fe/src/lib/Column.svelte
+++ b/fe/src/lib/Column.svelte
@@ -7,7 +7,13 @@
         display: flex;
         flex-direction: column;
         height: 100%;
-        gap: var(--gap, 32px);
+        gap: var(--gap, 2em);
         width: var(--width, initial);
     }
+
+    @media (min-width: 916px) {
+        .column {
+            flex-direction: column;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index ffc2fe8..1496239 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -205,12 +205,11 @@
     });
 </script>
 
-<Column --width="500px">
-    <Card --height="300px">
-        <!--<Chart />-->
+<Column>
+    <Card>
         <canvas bind:this={barCanvasRef} />
     </Card>
-    <Card --height="300px">
+    <Card>
         <canvas bind:this={lineCanvasRef} />
     </Card>
 </Column>
@@ -225,4 +224,3 @@
         {/await}
     </Card>
 </Column>
-<!-- <Chart /> -->
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index 2728dd3..26630d2 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,6 +1,6 @@
 <script>
     import { authenticated, token, user, preferences } from "../stores/auth";
-    import PreferencesForm from "./PreferencesForm.svelte";
+    import { PreferencesForm, AddForm } from "./forms";
     import { addFormOpen } from "../stores/forms";
 
     const logout = () => { 
@@ -30,9 +30,18 @@
                 <h1>Water</h1>
             </div>
             <div>
-                <button on:click={showAddDialog}>Log Water</button>
-                <button on:click={showPreferencesDialog}>Preference</button>
-                <button on:click={logout}>Logout</button>
+                <button on:click={showAddDialog}>
+                    <span class="btn-icon">➕</span>
+                    <span class="btn-content">Log Water</span>
+                </button>
+                <button on:click={showPreferencesDialog}>
+                    <span class="btn-icon">⚙</span>
+                    <span class="btn-content">Preference</span>
+                </button>
+                <button on:click={logout}>
+                    <span class="btn-icon">🔒</span>
+                    <span class="btn-content">Logout</span>
+                </button>
             </div>
         </nav>
         <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
@@ -43,17 +52,30 @@
 </div>
 
 <style>
-    .layout {
-        height: 100vh;
-    }
-
     nav {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         height: 64px;
-        padding: 0 2em;
+        padding: 1em 0;
+    }
+
+    nav div button {
+        margin: 0 .5em;
+    }
+
+    nav div button:first-child {
+        margin-left: 0;
+    }
+
+    nav div button:last-child {
+        margin-right: 0;
+    }
+
+
+    nav .btn-content {
+        display: none;
     }
 
     nav div {
@@ -66,9 +88,16 @@
 
     #content {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: center;
         gap: 2em;
-        margin-top: 4em;
+        margin-top: 1em;
+    }
+
+    @media (min-width: 916px) {
+        nav .btn-content {
+            display: inline;
+            margin-left: 1em;
+        }
     }
 </style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 621157e..3ce3331 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -7,7 +7,7 @@
 
     export let sortBy: string = 'date';
 
-    type SortComparator = (a, b) => number
+    type SortComparator = (a:any , b:any) => number
 
     function getDataKeys(data: any[]): string[] {
         if (!data || data.length === 0) return [];
@@ -20,7 +20,7 @@
         return Object.entries(row).filter((r) => !omit.includes(r[0]));
     }
 
-    function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => new Date(b[sortBy]) - new Date(a[sortBy])) {
+    function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => Date.parse(b[sortBy]) - Date.parse(a[sortBy])) {
         return arr.sort(fn)
     }
 
@@ -92,10 +92,7 @@
         border: solid 1px black;
         border-collapse: collapse;
         overflow-y: hidden;
-    }
-
-    th {
-        text-transform: capitalize;
+        width: calc(100% - 16px);
     }
 
     thead tr {
@@ -108,6 +105,7 @@
 
     th,
     td {
+        text-transform: capitalize;
         padding: 1em;
         border: 1px solid rgba(0, 0, 0, 1);
     }
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
index f85cce6..bbc8356 100644
--- a/fe/src/lib/forms/AddForm.svelte
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -11,21 +11,10 @@
     const statistic: Statistic = newStatistic();
 
     function newStatistic(): Statistic {
-        let now = new Date(),
-            month,
-            day,
-            year;
-
-        month = `${now.getMonth() + 1}`;
-        day = `${now.getDate()}`;
-        year = now.getFullYear();
-        if (month.length < 2) month = "0" + month;
-        if (day.length < 2) day = "0" + day;
-
-        const date = [year, month, day].join("-");
+        let date = new Date().toString();
 
         return {
-            user_id: $user!.uuid,
+            user_id: $user!.id,
             date,
             quantity: 1
         };
@@ -37,7 +26,7 @@
 
     async function handleSubmitStat()
     {
-        const { date, quantity } = statistic;
+        const { user_id, date, quantity } = statistic;
         await fetch(apiURL("stats"), {
             method: "POST",
             headers: {
@@ -45,7 +34,7 @@
             },
             body: JSON.stringify({
                 date: new Date(date),
-                user_id: 2,
+                user_id,
                 quantity
             })
         });
@@ -54,12 +43,12 @@
 
 </script>
 
-<dialog {open} on:submit={handleSubmitStat}>
+<dialog id="addForm" {open} on:submit={handleSubmitStat}>
     <h2>Add Water</h2>
     <form method="dialog">
         <div class="form input group">
             <label for="date">Date:</label>
-            <input bind:value={statistic.date} id="date" name="date" type="date" />
+            <input bind:value={statistic.date} id="date" name="date" type="datetime-local" />
         </div>
         <div class="form input group">
             <label for="quantity">Quantity:</label>
@@ -75,4 +64,4 @@
         <button on:click={closeDialog}>Cancel</button>
         <button type="submit">Submit</button>
     </form>
-</dialog>
\ No newline at end of file
+</dialog>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte
index cf5febf..88d4479 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/forms/LoginForm.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { token, user, preferences } from "../stores/auth";
-  import Card from "./Card.svelte";
-  import { apiURL } from "../utils";
+  import { token, user, preferences } from "../../stores/auth";
+  import Card from "../Card.svelte";
+  import { apiURL } from "../../utils";
 
   let credentials: CredentialObject = {
     username: "",
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/forms/PreferencesForm.svelte
index 74b8a63..79663d1 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/forms/PreferencesForm.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { user, preferences, token } from "../stores/auth";
+  import { user, preferences, token } from "../../stores/auth";
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
-  import type { User } from "../types";
-  import { apiURL } from "../utils";
+  import type { User } from "../../types";
+  import { apiURL } from "../../utils";
 
   export let open: boolean;
 
@@ -107,7 +107,7 @@
 </dialog>
 
 <style>
-  dialog {
+  /* dialog {
     background: white;
     color: black;
   }
@@ -115,5 +115,5 @@
   input[type="color"] {
     width: 4em;
     height: 4em;
-  }
+  } */
 </style>
diff --git a/fe/src/lib/forms/index.ts b/fe/src/lib/forms/index.ts
new file mode 100644
index 0000000..ac4e63b
--- /dev/null
+++ b/fe/src/lib/forms/index.ts
@@ -0,0 +1,10 @@
+import AddForm from "./AddForm.svelte";
+import LoginForm from "./LoginForm.svelte";
+import PreferencesForm from "./PreferencesForm.svelte";
+
+
+export {
+  AddForm,
+  LoginForm,
+  PreferencesForm
+};
\ No newline at end of file
diff --git a/fe/src/types.ts b/fe/src/types.ts
index c8f2f00..e06e789 100644
--- a/fe/src/types.ts
+++ b/fe/src/types.ts
@@ -19,7 +19,7 @@ export interface User {
 }
 
 export interface Statistic {
-  user_id: string;
+  user_id: number;
   date: string;
   quantity: number;
 }