Initial commit

2025-03-05 21:38:10 +01:00
commit 503909d762
198 changed files with 19203 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+**/.git
+**/node_modules
+**/Dockerfile*
+**/dist
+/.angular/cache
+**/compose.yml
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+
+*.old
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/28
+++ b/28
@@ -0,0 +1,28 @@
+FROM node:18-alpine as build
+WORKDIR /build
+ADD . .
+RUN [ "npm", "ci" ]
+COPY <<EOF src/environments/environment.ts
+export const environment = {
+    apiEndpoint: `http://localhost/api`,
+    version: "v1.0.0",
+    vapid: {
+        pubkey: `${VAPID}`
+    },
+    production: true
+};
+EOF
+RUN [ "npm", "run", "build" ]
+
+FROM httpd:alpine as runtime
+COPY httpd.conf /usr/local/apache2/conf/httpd.conf
+COPY --from=build /build/dist /usr/local/apache2/htdocs/
+COPY <<EOF /usr/local/apache2/htdocs/ipwa/.htaccess
+RewriteEngine on
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+RewriteRule ^ - [L]
+RewriteRule ^ /ipwa/index.html
+EOF
+RUN chmod +rx /usr/local/apache2/htdocs/ipwa/.htaccess
+EXPOSE 80
--- a/README.md
+++ b/README.md
@@ -0,0 +1,22 @@
+# Ipwa
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4.
+This project depends on the [Backend server](https://github.com/Slasherss1/ipwa-backend2)
+
+## Things to change
+Change following files:
+- `Dockerfile`:
+    | Line | What to change | Note |
+    | --- | --- | --- |
+    | 7 | ``apiEndpoint: `http://localhost/api`,`` | Change url to backend endpoint |
+
+- `httpd.conf`:
+    | Line | What to change | Note |
+    | --- | --- | --- |
+    | 233 | `ServerAdmin you@example.com` | Change to webmaster's email |
+    | 242 | `ServerName www.example.com` | Change to final domain name |
+    | 312 | `ServerName www.example.com` | See above |
+    | 314 | `SSLCertificateFile /cert/live/<domain>/cert.pem` | Change `<domain>` to the domain name above |
+    | 315 | `SSLCertificateKeyFile /cert/live/<domain>/privkey.pem` | Change `<domain>` to the domain name above |
+    | 316 | `SSLCertificateChainFile /cert/live/<domain>/chain.pem` | Change `<domain>` to the domain name above |
+- (Optional) `src/assets/icons/*` - You can change the icons to your own 
--- a/angular.json
+++ b/angular.json
@@ -0,0 +1,122 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ipwa": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "standalone": false
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ipwa",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.webmanifest"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json",
+            "allowedCommonJsDependencies": [
+              "moment"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "5mb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "ipwa:build:production"
+            },
+            "development": {
+              "buildTarget": "ipwa:build:development"
+            }
+          },
+          "options": {
+            "servePath": "/ipwa/",
+            "open": true
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "ipwa:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.webmanifest"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
--- a/compose.yml
+++ b/compose.yml
@@ -0,0 +1,5 @@
+services:
+  front:
+    build: .
+    ports:
+      - 8080:80
--- a/httpd.conf
+++ b/httpd.conf
@@ -0,0 +1,576 @@
+#
+# This is the main Apache HTTP server configuration file.  It contains the
+# configuration directives that give the server its instructions.
+# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.
+# In particular, see 
+# <URL:http://httpd.apache.org/docs/2.4/mod/directives.html>
+# for a discussion of each configuration directive.
+#
+# Do NOT simply read the instructions in here without understanding
+# what they do.  They're here only as hints or reminders.  If you are unsure
+# consult the online docs. You have been warned.  
+#
+# Configuration and logfile names: If the filenames you specify for many
+# of the server's control files begin with "/" (or "drive:/" for Win32), the
+# server will use that explicit path.  If the filenames do *not* begin
+# with "/", the value of ServerRoot is prepended -- so "logs/access_log"
+# with ServerRoot set to "/usr/local/apache2" will be interpreted by the
+# server as "/usr/local/apache2/logs/access_log", whereas "/logs/access_log" 
+# will be interpreted as '/logs/access_log'.
+
+#
+# ServerRoot: The top of the directory tree under which the server's
+# configuration, error, and log files are kept.
+#
+# Do not add a slash at the end of the directory path.  If you point
+# ServerRoot at a non-local disk, be sure to specify a local disk on the
+# Mutex directive, if file-based mutexes are used.  If you wish to share the
+# same ServerRoot for multiple httpd daemons, you will need to change at
+# least PidFile.
+#
+ServerRoot "/usr/local/apache2"
+
+#
+# Mutex: Allows you to set the mutex mechanism and mutex file directory
+# for individual mutexes, or change the global defaults
+#
+# Uncomment and change the directory if mutexes are file-based and the default
+# mutex file directory is not on a local disk or is not appropriate for some
+# other reason.
+#
+# Mutex default:logs
+
+#
+# Listen: Allows you to bind Apache to specific IP addresses and/or
+# ports, instead of the default. See also the <VirtualHost>
+# directive.
+#
+# Change this to Listen on specific IP addresses as shown below to 
+# prevent Apache from glomming onto all bound IP addresses.
+#
+#Listen 12.34.56.78:80
+Listen 80
+Listen 443
+
+#
+# Dynamic Shared Object (DSO) Support
+#
+# To be able to use the functionality of a module which was built as a DSO you
+# have to place corresponding `LoadModule' lines at this location so the
+# directives contained in it are actually available _before_ they are used.
+# Statically compiled modules (those listed by `httpd -l') do not need
+# to be loaded here.
+#
+# Example:
+# LoadModule foo_module modules/mod_foo.so
+#
+LoadModule mpm_event_module modules/mod_mpm_event.so
+#LoadModule mpm_prefork_module modules/mod_mpm_prefork.so
+#LoadModule mpm_worker_module modules/mod_mpm_worker.so
+LoadModule authn_file_module modules/mod_authn_file.so
+#LoadModule authn_dbm_module modules/mod_authn_dbm.so
+#LoadModule authn_anon_module modules/mod_authn_anon.so
+#LoadModule authn_dbd_module modules/mod_authn_dbd.so
+#LoadModule authn_socache_module modules/mod_authn_socache.so
+LoadModule authn_core_module modules/mod_authn_core.so
+LoadModule authz_host_module modules/mod_authz_host.so
+LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
+LoadModule authz_user_module modules/mod_authz_user.so
+#LoadModule authz_dbm_module modules/mod_authz_dbm.so
+#LoadModule authz_owner_module modules/mod_authz_owner.so
+#LoadModule authz_dbd_module modules/mod_authz_dbd.so
+LoadModule authz_core_module modules/mod_authz_core.so
+#LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
+#LoadModule authnz_fcgi_module modules/mod_authnz_fcgi.so
+LoadModule access_compat_module modules/mod_access_compat.so
+LoadModule auth_basic_module modules/mod_auth_basic.so
+#LoadModule auth_form_module modules/mod_auth_form.so
+#LoadModule auth_digest_module modules/mod_auth_digest.so
+#LoadModule allowmethods_module modules/mod_allowmethods.so
+#LoadModule isapi_module modules/mod_isapi.so
+#LoadModule file_cache_module modules/mod_file_cache.so
+#LoadModule cache_module modules/mod_cache.so
+#LoadModule cache_disk_module modules/mod_cache_disk.so
+#LoadModule cache_socache_module modules/mod_cache_socache.so
+#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so
+#LoadModule socache_dbm_module modules/mod_socache_dbm.so
+#LoadModule socache_memcache_module modules/mod_socache_memcache.so
+#LoadModule socache_redis_module modules/mod_socache_redis.so
+#LoadModule watchdog_module modules/mod_watchdog.so
+#LoadModule macro_module modules/mod_macro.so
+#LoadModule dbd_module modules/mod_dbd.so
+#LoadModule bucketeer_module modules/mod_bucketeer.so
+#LoadModule dumpio_module modules/mod_dumpio.so
+#LoadModule echo_module modules/mod_echo.so
+#LoadModule example_hooks_module modules/mod_example_hooks.so
+#LoadModule case_filter_module modules/mod_case_filter.so
+#LoadModule case_filter_in_module modules/mod_case_filter_in.so
+#LoadModule example_ipc_module modules/mod_example_ipc.so
+#LoadModule buffer_module modules/mod_buffer.so
+#LoadModule data_module modules/mod_data.so
+#LoadModule ratelimit_module modules/mod_ratelimit.so
+LoadModule reqtimeout_module modules/mod_reqtimeout.so
+#LoadModule ext_filter_module modules/mod_ext_filter.so
+#LoadModule request_module modules/mod_request.so
+#LoadModule include_module modules/mod_include.so
+LoadModule filter_module modules/mod_filter.so
+#LoadModule reflector_module modules/mod_reflector.so
+#LoadModule substitute_module modules/mod_substitute.so
+#LoadModule sed_module modules/mod_sed.so
+#LoadModule charset_lite_module modules/mod_charset_lite.so
+#LoadModule deflate_module modules/mod_deflate.so
+#LoadModule xml2enc_module modules/mod_xml2enc.so
+#LoadModule proxy_html_module modules/mod_proxy_html.so
+#LoadModule brotli_module modules/mod_brotli.so
+LoadModule mime_module modules/mod_mime.so
+#LoadModule ldap_module modules/mod_ldap.so
+LoadModule log_config_module modules/mod_log_config.so
+#LoadModule log_debug_module modules/mod_log_debug.so
+#LoadModule log_forensic_module modules/mod_log_forensic.so
+#LoadModule logio_module modules/mod_logio.so
+#LoadModule lua_module modules/mod_lua.so
+LoadModule env_module modules/mod_env.so
+#LoadModule mime_magic_module modules/mod_mime_magic.so
+#LoadModule cern_meta_module modules/mod_cern_meta.so
+#LoadModule expires_module modules/mod_expires.so
+LoadModule headers_module modules/mod_headers.so
+#LoadModule ident_module modules/mod_ident.so
+#LoadModule usertrack_module modules/mod_usertrack.so
+#LoadModule unique_id_module modules/mod_unique_id.so
+LoadModule setenvif_module modules/mod_setenvif.so
+LoadModule version_module modules/mod_version.so
+#LoadModule remoteip_module modules/mod_remoteip.so
+LoadModule proxy_module modules/mod_proxy.so
+#LoadModule proxy_connect_module modules/mod_proxy_connect.so
+#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
+LoadModule proxy_http_module modules/mod_proxy_http.so
+#LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
+#LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
+#LoadModule proxy_uwsgi_module modules/mod_proxy_uwsgi.so
+#LoadModule proxy_fdpass_module modules/mod_proxy_fdpass.so
+#LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
+#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
+#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
+#LoadModule proxy_express_module modules/mod_proxy_express.so
+#LoadModule proxy_hcheck_module modules/mod_proxy_hcheck.so
+#LoadModule session_module modules/mod_session.so
+#LoadModule session_cookie_module modules/mod_session_cookie.so
+#LoadModule session_crypto_module modules/mod_session_crypto.so
+#LoadModule session_dbd_module modules/mod_session_dbd.so
+#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so
+#LoadModule slotmem_plain_module modules/mod_slotmem_plain.so
+LoadModule ssl_module modules/mod_ssl.so
+#LoadModule optional_hook_export_module modules/mod_optional_hook_export.so
+#LoadModule optional_hook_import_module modules/mod_optional_hook_import.so
+#LoadModule optional_fn_import_module modules/mod_optional_fn_import.so
+#LoadModule optional_fn_export_module modules/mod_optional_fn_export.so
+#LoadModule dialup_module modules/mod_dialup.so
+#LoadModule http2_module modules/mod_http2.so
+#LoadModule proxy_http2_module modules/mod_proxy_http2.so
+#LoadModule md_module modules/mod_md.so
+#LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so
+#LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so
+#LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so
+#LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so
+LoadModule unixd_module modules/mod_unixd.so
+#LoadModule heartbeat_module modules/mod_heartbeat.so
+#LoadModule heartmonitor_module modules/mod_heartmonitor.so
+#LoadModule dav_module modules/mod_dav.so
+LoadModule status_module modules/mod_status.so
+LoadModule autoindex_module modules/mod_autoindex.so
+#LoadModule asis_module modules/mod_asis.so
+#LoadModule info_module modules/mod_info.so
+#LoadModule suexec_module modules/mod_suexec.so
+<IfModule !mpm_prefork_module>
+	#LoadModule cgid_module modules/mod_cgid.so
+</IfModule>
+<IfModule mpm_prefork_module>
+	#LoadModule cgi_module modules/mod_cgi.so
+</IfModule>
+#LoadModule dav_fs_module modules/mod_dav_fs.so
+#LoadModule dav_lock_module modules/mod_dav_lock.so
+#LoadModule vhost_alias_module modules/mod_vhost_alias.so
+#LoadModule negotiation_module modules/mod_negotiation.so
+LoadModule dir_module modules/mod_dir.so
+#LoadModule imagemap_module modules/mod_imagemap.so
+#LoadModule actions_module modules/mod_actions.so
+#LoadModule speling_module modules/mod_speling.so
+#LoadModule userdir_module modules/mod_userdir.so
+LoadModule alias_module modules/mod_alias.so
+LoadModule rewrite_module modules/mod_rewrite.so
+
+<IfModule unixd_module>
+#
+# If you wish httpd to run as a different user or group, you must run
+# httpd as root initially and it will switch.  
+#
+# User/Group: The name (or #number) of the user/group to run httpd as.
+# It is usually good practice to create a dedicated user and group for
+# running httpd, as with most system services.
+#
+User www-data
+Group www-data
+
+</IfModule>
+
+# 'Main' server configuration
+#
+# The directives in this section set up the values used by the 'main'
+# server, which responds to any requests that aren't handled by a
+# <VirtualHost> definition.  These values also provide defaults for
+# any <VirtualHost> containers you may define later in the file.
+#
+# All of these directives may appear inside <VirtualHost> containers,
+# in which case these default settings will be overridden for the
+# virtual host being defined.
+#
+
+#
+# ServerAdmin: Your address, where problems with the server should be
+# e-mailed.  This address appears on some server-generated pages, such
+# as error documents.  e.g. admin@your-domain.com
+#
+ServerAdmin you@example.com
+
+#
+# ServerName gives the name and port that the server uses to identify itself.
+# This can often be determined automatically, but we recommend you specify
+# it explicitly to prevent problems during startup.
+#
+# If your host doesn't have a registered DNS name, enter its IP address here.
+#
+ServerName www.example.com
+
+#
+# Deny access to the entirety of your server's filesystem. You must
+# explicitly permit access to web content directories in other 
+# <Directory> blocks below.
+#
+<Directory />
+    AllowOverride none
+    Require all denied
+</Directory>
+
+#
+# Note that from this point forward you must specifically allow
+# particular features to be enabled - so if something's not working as
+# you might expect, make sure that you have specifically enabled it
+# below.
+#
+
+#
+# DocumentRoot: The directory out of which you will serve your
+# documents. By default, all requests are taken from this directory, but
+# symbolic links and aliases may be used to point to other locations.
+#
+DocumentRoot "/usr/local/apache2/htdocs"
+<Directory "/usr/local/apache2/htdocs">
+    #
+    # Possible values for the Options directive are "None", "All",
+    # or any combination of:
+    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
+    #
+    # Note that "MultiViews" must be named *explicitly* --- "Options All"
+    # doesn't give it to you.
+    #
+    # The Options directive is both complicated and important.  Please see
+    # http://httpd.apache.org/docs/2.4/mod/core.html#options
+    # for more information.
+    #
+    Options Indexes FollowSymLinks
+
+    #
+    # AllowOverride controls what directives may be placed in .htaccess files.
+    # It can be "All", "None", or any combination of the keywords:
+    #   AllowOverride FileInfo AuthConfig Limit
+    #
+    AllowOverride All
+
+    #
+    # Controls who can get stuff from this server.
+    #
+    Require all granted
+</Directory>
+
+<Directory "/var/www/certbot/">
+    Options Indexes FollowSymLinks
+    AllowOverride None
+    Require all granted
+</Directory>
+
+ProxyPass "/api" "http://api:8080"
+ProxyPassReverse "/api" "http://api:8080"
+
+RedirectMatch ^/$ /ipwa
+
+<Location "/.well-known/acme-challenge/">
+    AliasPreservePath on
+    Alias "/var/www/certbot/.well-known/acme-challenge/"
+</Location>
+
+<VirtualHost *:443>
+    ServerName www.example.com
+    SSLEngine on
+    SSLCertificateFile /cert/live/<domain>/cert.pem
+    SSLCertificateKeyFile /cert/live/<domain>/privkey.pem
+    SSLCertificateChainFile /cert/live/<domain>/chain.pem
+</VirtualHost>
+
+#
+# DirectoryIndex: sets the file that Apache will serve if a directory
+# is requested.
+#
+<IfModule dir_module>
+    DirectoryIndex index.html
+</IfModule>
+
+#
+# The following lines prevent .htaccess and .htpasswd files from being 
+# viewed by Web clients. 
+#
+<Files ".ht*">
+    Require all denied
+</Files>
+
+#
+# ErrorLog: The location of the error log file.
+# If you do not specify an ErrorLog directive within a <VirtualHost>
+# container, error messages relating to that virtual host will be
+# logged here.  If you *do* define an error logfile for a <VirtualHost>
+# container, that host's errors will be logged there and not here.
+#
+ErrorLog /proc/self/fd/2
+
+#
+# LogLevel: Control the number of messages logged to the error_log.
+# Possible values include: debug, info, notice, warn, error, crit,
+# alert, emerg.
+#
+LogLevel warn
+
+<IfModule log_config_module>
+    #
+    # The following directives define some format nicknames for use with
+    # a CustomLog directive (see below).
+    #
+    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
+    LogFormat "%h %l %u %t \"%r\" %>s %b" common
+
+    <IfModule logio_module>
+      # You need to enable mod_logio.c to use %I and %O
+      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
+    </IfModule>
+
+    #
+    # The location and format of the access logfile (Common Logfile Format).
+    # If you do not define any access logfiles within a <VirtualHost>
+    # container, they will be logged here.  Contrariwise, if you *do*
+    # define per-<VirtualHost> access logfiles, transactions will be
+    # logged therein and *not* in this file.
+    #
+    CustomLog /proc/self/fd/1 common
+
+    #
+    # If you prefer a logfile with access, agent, and referer information
+    # (Combined Logfile Format) you can use the following directive.
+    #
+    #CustomLog "logs/access_log" combined
+</IfModule>
+
+<IfModule alias_module>
+    #
+    # Redirect: Allows you to tell clients about documents that used to 
+    # exist in your server's namespace, but do not anymore. The client 
+    # will make a new request for the document at its new location.
+    # Example:
+    # Redirect permanent /foo http://www.example.com/bar
+
+    #
+    # Alias: Maps web paths into filesystem paths and is used to
+    # access content that does not live under the DocumentRoot.
+    # Example:
+    # Alias /webpath /full/filesystem/path
+    #
+    # If you include a trailing / on /webpath then the server will
+    # require it to be present in the URL.  You will also likely
+    # need to provide a <Directory> section to allow access to
+    # the filesystem path.
+
+    #
+    # ScriptAlias: This controls which directories contain server scripts. 
+    # ScriptAliases are essentially the same as Aliases, except that
+    # documents in the target directory are treated as applications and
+    # run by the server when requested rather than as documents sent to the
+    # client.  The same rules about trailing "/" apply to ScriptAlias
+    # directives as to Alias.
+    #
+    ScriptAlias /cgi-bin/ "/usr/local/apache2/cgi-bin/"
+
+</IfModule>
+
+<IfModule cgid_module>
+    #
+    # ScriptSock: On threaded servers, designate the path to the UNIX
+    # socket used to communicate with the CGI daemon of mod_cgid.
+    #
+    #Scriptsock cgisock
+</IfModule>
+
+#
+# "/usr/local/apache2/cgi-bin" should be changed to whatever your ScriptAliased
+# CGI directory exists, if you have that configured.
+#
+<Directory "/usr/local/apache2/cgi-bin">
+    AllowOverride None
+    Options None
+    Require all granted
+</Directory>
+
+<IfModule headers_module>
+    #
+    # Avoid passing HTTP_PROXY environment to CGI's on this or any proxied
+    # backend servers which have lingering "httpoxy" defects.
+    # 'Proxy' request header is undefined by the IETF, not listed by IANA
+    #
+    RequestHeader unset Proxy early
+</IfModule>
+
+<IfModule mime_module>
+    #
+    # TypesConfig points to the file containing the list of mappings from
+    # filename extension to MIME-type.
+    #
+    TypesConfig conf/mime.types
+
+    #
+    # AddType allows you to add to or override the MIME configuration
+    # file specified in TypesConfig for specific file types.
+    #
+    #AddType application/x-gzip .tgz
+    #
+    # AddEncoding allows you to have certain browsers uncompress
+    # information on the fly. Note: Not all browsers support this.
+    #
+    #AddEncoding x-compress .Z
+    #AddEncoding x-gzip .gz .tgz
+    #
+    # If the AddEncoding directives above are commented-out, then you
+    # probably should define those extensions to indicate media types:
+    #
+    AddType application/x-compress .Z
+    AddType application/x-gzip .gz .tgz
+
+    #
+    # AddHandler allows you to map certain file extensions to "handlers":
+    # actions unrelated to filetype. These can be either built into the server
+    # or added with the Action directive (see below)
+    #
+    # To use CGI scripts outside of ScriptAliased directories:
+    # (You will also need to add "ExecCGI" to the "Options" directive.)
+    #
+    #AddHandler cgi-script .cgi
+
+    # For type maps (negotiated resources):
+    #AddHandler type-map var
+
+    #
+    # Filters allow you to process content before it is sent to the client.
+    #
+    # To parse .shtml files for server-side includes (SSI):
+    # (You will also need to add "Includes" to the "Options" directive.)
+    #
+    #AddType text/html .shtml
+    #AddOutputFilter INCLUDES .shtml
+</IfModule>
+
+#
+# The mod_mime_magic module allows the server to use various hints from the
+# contents of the file itself to determine its type.  The MIMEMagicFile
+# directive tells the module where the hint definitions are located.
+#
+#MIMEMagicFile conf/magic
+
+#
+# Customizable error responses come in three flavors:
+# 1) plain text 2) local redirects 3) external redirects
+#
+# Some examples:
+#ErrorDocument 500 "The server made a boo boo."
+#ErrorDocument 404 /missing.html
+#ErrorDocument 404 "/cgi-bin/missing_handler.pl"
+#ErrorDocument 402 http://www.example.com/subscription_info.html
+#
+
+#
+# MaxRanges: Maximum number of Ranges in a request before
+# returning the entire resource, or one of the special
+# values 'default', 'none' or 'unlimited'.
+# Default setting is to accept 200 Ranges.
+#MaxRanges unlimited
+
+#
+# EnableMMAP and EnableSendfile: On systems that support it, 
+# memory-mapping or the sendfile syscall may be used to deliver
+# files.  This usually improves server performance, but must
+# be turned off when serving from networked-mounted 
+# filesystems or if support for these functions is otherwise
+# broken on your system.
+# Defaults: EnableMMAP On, EnableSendfile Off
+#
+#EnableMMAP off
+#EnableSendfile on
+
+# Supplemental configuration
+#
+# The configuration files in the conf/extra/ directory can be 
+# included to add extra features or to modify the default configuration of 
+# the server, or you may simply copy their contents here and change as 
+# necessary.
+
+# Server-pool management (MPM specific)
+#Include conf/extra/httpd-mpm.conf
+
+# Multi-language error messages
+#Include conf/extra/httpd-multilang-errordoc.conf
+
+# Fancy directory listings
+#Include conf/extra/httpd-autoindex.conf
+
+# Language settings
+#Include conf/extra/httpd-languages.conf
+
+# User home directories
+#Include conf/extra/httpd-userdir.conf
+
+# Real-time info on requests and configuration
+#Include conf/extra/httpd-info.conf
+
+# Virtual hosts
+#Include conf/extra/httpd-vhosts.conf
+
+# Local access to the Apache HTTP Server Manual
+#Include conf/extra/httpd-manual.conf
+
+# Distributed authoring and versioning (WebDAV)
+#Include conf/extra/httpd-dav.conf
+
+# Various default settings
+#Include conf/extra/httpd-default.conf
+
+# Configure mod_proxy_html to understand HTML4/XHTML1
+<IfModule proxy_html_module>
+Include conf/extra/proxy-html.conf
+</IfModule>
+
+# Secure (SSL/TLS) connections
+#Include conf/extra/httpd-ssl.conf
+#
+# Note: The following must must be present to support
+#       starting without SSL on platforms with no /dev/random equivalent
+#       but a statically compiled-in mod_ssl.
+#
+<IfModule ssl_module>
+SSLRandomSeed startup builtin
+SSLRandomSeed connect builtin
+</IfModule>
+
--- a/ngsw-config.json
+++ b/ngsw-config.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "./index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "./assets/**",
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "ipwa",
+  "version": "b0.7.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build -c production",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "ci": "ng test --no-watch --no-progress --browsers=ChromiumHeadless"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.3.2",
+    "@angular/cdk": "^17.3.2",
+    "@angular/cli": "^17.3.2",
+    "@angular/common": "^17.3.2",
+    "@angular/compiler": "^17.3.2",
+    "@angular/core": "^17.3.2",
+    "@angular/forms": "^17.3.2",
+    "@angular/material": "^17.3.2",
+    "@angular/material-moment-adapter": "^17.3.2",
+    "@angular/platform-browser": "^17.3.2",
+    "@angular/platform-browser-dynamic": "^17.3.2",
+    "@angular/router": "^17.3.2",
+    "@angular/service-worker": "^17.3.2",
+    "marked": "^12.0.1",
+    "moment": "^2.29.4",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.2",
+    "@angular/compiler-cli": "^17.3.2",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~5.4.3"
+  }
+}
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.html
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.html
@@ -0,0 +1,43 @@
+<div id="upper-bar">
+    <mat-form-field>
+        <mat-label>Wyszukaj</mat-label>
+        <input matInput (keyup)="filter($event)">
+    </mat-form-field>
+    <button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
+</div>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<table mat-table [dataSource]="users">
+    <div matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>Imię</th>
+        <td mat-cell *matCellDef="let element">{{element.fname}}</td>
+    </div>
+    <div matColumnDef="surname">
+        <th mat-header-cell *matHeaderCellDef>Nazwisko</th>
+        <td mat-cell *matCellDef="let element">{{element.surname}}</td>
+    </div>
+    <div matColumnDef="room">
+        <th mat-header-cell *matHeaderCellDef>Pokój</th>
+        <td mat-cell *matCellDef="let element">{{element.room}}</td>
+    </div>
+    <div matColumnDef="uname">
+        <th mat-header-cell *matHeaderCellDef>Nazwa użytkownika</th>
+        <td mat-cell *matCellDef="let element">{{element.uname}}</td>
+    </div>
+    <div matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Akcje</th>
+        <td mat-cell *matCellDef="let element">
+            <button mat-mini-fab (click)="resetPass(element._id)"><mat-icon>lock_reset</mat-icon></button>
+            <button mat-mini-fab (click)="edit(element)"><mat-icon>edit</mat-icon></button>
+            <button mat-mini-fab (click)="toggleLock(element)">
+                <div [ngSwitch]="element.locked">
+                    <mat-icon *ngSwitchCase="true">lock</mat-icon>
+                    <mat-icon *ngSwitchDefault>lock_open</mat-icon>
+                </div>
+            </button>
+            <button mat-mini-fab (click)="delete(element._id)"><mat-icon>delete_forever</mat-icon></button>
+        </td>
+    </div>
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: collumns"></tr>
+</table>
+<mat-paginator pageSize="9" [pageSizeOptions]="[9, 15, 20, 50, 160]"></mat-paginator>
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.scss
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+mat-paginator {
+    margin-top: auto;
+}
+
+mat-form-field {
+    flex-grow: 1;
+}
+
+#upper-bar {
+    display: flex;
+}
+
+button[mat-icon-button] {
+    margin-left: 4pt;
+    margin-right: 4pt;
+    margin-top: 4pt;
+}
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountMgmtComponent } from './account-mgmt.component';
+import { AdminCommService } from '../admin-comm.service';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { of } from 'rxjs';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('AccountMgmtComponent', () => {
+  let component: AccountMgmtComponent;
+  let fixture: ComponentFixture<AccountMgmtComponent>;
+
+  beforeEach(async () => {
+    const acMock = jasmine.createSpyObj("AdminCommService", {
+      getAccs: of()
+    })
+    await TestBed.configureTestingModule({
+      declarations: [AccountMgmtComponent],
+      providers: [
+        {provide: AdminCommService, useValue: acMock}
+      ],
+      imports: [MatDialogModule, MatSnackBarModule, MatFormFieldModule, MatIconModule, MatPaginatorModule, MatTableModule, MatInputModule, BrowserAnimationsModule]
+    }).compileComponents();
+    fixture = TestBed.createComponent(AccountMgmtComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/account-mgmt.component.ts
+++ b/src/app/admin-view/account-mgmt/account-mgmt.component.ts
@@ -0,0 +1,130 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { UserDeleteComponent } from './user-delete/user-delete.component';
+import { UserEditComponent } from './user-edit/user-edit.component';
+import { catchError, throwError } from 'rxjs';
+import { UserResetComponent } from './user-reset/user-reset.component';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-account-mgmt',
+  templateUrl: './account-mgmt.component.html',
+  styleUrls: ['./account-mgmt.component.scss']
+})
+
+
+export class AccountMgmtComponent implements OnInit, AfterViewInit {
+  users: MatTableDataSource<any>
+  loading = false
+  @ViewChild(MatPaginator) paginator!: MatPaginator
+
+  constructor(readonly ac:AdminCommService, private dialog: MatDialog, private sb: MatSnackBar, protected readonly ls: LocalStorageService) {
+    this.users = new MatTableDataSource<any>();
+    this.users.filterPredicate = (data: Record<string, any>, filter: string): boolean => {
+      const dataStr = Object.keys(data).reduce((curr: string, key: string) => {
+        if (key == "_id") {
+          return ''
+        }
+        return curr + data[key] + '⫂'
+      }, '').toLowerCase()
+      const filternew = filter.trim().toLowerCase()
+
+      return dataStr.indexOf(filternew) != -1
+    }
+  }
+  
+  ngAfterViewInit() {
+    this.users.paginator = this.paginator
+  }
+
+  ngOnInit() {
+    this.loading = true
+    this.ac.accs.getAccs().subscribe((data)=>{
+      this.loading = false
+      this.users.data = data
+    })
+  }
+
+  filter(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.users.filter = value.toLowerCase().trim()
+  }
+
+  edit(item: any) {
+    this.dialog.open(UserEditComponent, {data: item}).afterClosed().subscribe(reply => {
+      if (reply) {
+        this.ac.accs.putAcc(item._id, reply).pipe(catchError((err)=>{
+          this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+          return throwError(()=> new Error(err.message))
+        })).subscribe((data)=> {
+          if (data.status == 200) {
+            this.sb.open("Użytkownik został zmodyfikowany.", undefined, {duration: 2500})
+            this.ngOnInit()
+          } else {
+            this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+          }
+        })
+      }
+    })
+  }
+
+  new() {
+    this.dialog.open(UserEditComponent).afterClosed().subscribe(reply => {
+      if (reply) {
+        this.ac.accs.postAcc(reply).pipe(catchError((err)=>{
+          this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+          return throwError(()=> new Error(err.message))
+        })).subscribe((data)=> {
+          if (data.status == 201) {
+            this.sb.open("Użytkownik został utworzony.", undefined, {duration: 2500})
+            this.ngOnInit()
+          } else {
+            this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+          }
+        })
+      }
+    })
+  }
+
+  delete(id: string) {
+    this.dialog.open(UserDeleteComponent).afterClosed().subscribe(reply => {
+      if (reply) {
+        this.ac.accs.deleteAcc(id).subscribe((res) => {
+          if (res.status == 200) {
+            this.sb.open("Użytkownik został usunięty.", undefined, {duration: 2500})
+            this.ngOnInit()
+          } else {
+            this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+            console.error(res);
+          }
+        })
+      }
+    })
+  }
+
+  resetPass(id: string) {
+    this.dialog.open(UserResetComponent).afterClosed().subscribe((res) => {
+      if (res == true) {
+        this.ac.accs.resetPass(id).subscribe((patch)=>{
+          if (patch.status == 200) {
+            this.sb.open("Hasło zostało zresetowane", undefined, {duration: 2500})
+          }
+        })
+      }
+    })
+  }
+
+  toggleLock(item: any) {
+    this.ac.accs.putAcc(item._id, {locked: !item.locked}).subscribe((res) => {
+      if (res.status == 200) {
+        item.locked = !item.locked
+      }
+    })
+  }
+
+  collumns = ['name', 'surname', 'uname', 'actions']
+}
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.html
+++ b/src/app/admin-view/account-mgmt/user-delete/user-delete.component.html
@@ -0,0 +1,5 @@
+<h1 mat-dialog-title>Czy na pewno chcesz usunąć tego użytkownika</h1>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Nie</button>
+    <button mat-button color="warn" [mat-dialog-close]="true">Tak</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.scss
+++ b/src/app/admin-view/account-mgmt/user-delete/user-delete.component.scss
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/user-delete/user-delete.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDeleteComponent } from './user-delete.component';
+import { MatDialogModule } from '@angular/material/dialog';
+
+describe('UserDeleteComponent', () => {
+  let component: UserDeleteComponent;
+  let fixture: ComponentFixture<UserDeleteComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserDeleteComponent],
+      imports: [MatDialogModule]
+    });
+    fixture = TestBed.createComponent(UserDeleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/user-delete/user-delete.component.ts
+++ b/src/app/admin-view/account-mgmt/user-delete/user-delete.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-delete',
+  templateUrl: './user-delete.component.html',
+  styleUrls: ['./user-delete.component.scss']
+})
+export class UserDeleteComponent {
+
+}
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.html
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.html
@@ -0,0 +1,31 @@
+<form [formGroup]="form" (ngSubmit)="editUser()">
+    <mat-form-field appearance="outline">
+        <mat-label>Imię</mat-label>
+        <input type="text" matInput formControlName="fname">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Nazwisko</mat-label>
+        <input type="text" matInput formControlName="surname">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Pokój</mat-label>
+        <input type="text" matInput formControlName="room">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Nazwa użytkownika</mat-label>
+        <input type="text" matInput required formControlName="uname">
+    </mat-form-field>
+    <mat-form-field *ngIf="this.ls.permChecker(32)">
+        <mat-label>Uprawnienia</mat-label>
+        <mat-select multiple formControlName="flags">
+            <mat-option [value]="1" *ngIf="ls.capCheck(1)">Wiadomości</mat-option>
+            <mat-option [value]="2" *ngIf="ls.capCheck(2)">Jadłospis</mat-option>
+            <mat-option [value]="4" *ngIf="ls.capCheck(4)">Powiadomienia</mat-option>
+            <mat-option [value]="8" *ngIf="ls.capCheck(8)">Grupy</mat-option>
+            <mat-option [value]="16">Konta</mat-option>
+            <mat-option [value]="64" *ngIf="ls.capCheck(32)">Klucze</mat-option>
+            <mat-option [value]="128" *ngIf="ls.capCheck(16)">Czystość</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <button mat-stroked-button>Wyślij</button>
+</form>
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.scss
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.scss
@@ -0,0 +1,10 @@
+:host {
+    padding: 8pt;
+    display: block;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.spec.ts
@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserEditComponent } from './user-edit.component';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('UserEditComponent', () => {
+  let component: UserEditComponent;
+  let fixture: ComponentFixture<UserEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserEditComponent],
+      imports: [MatDialogModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, BrowserAnimationsModule],
+      providers: [
+        {provide: MatDialogRef, useValue: {}},
+        {provide: MAT_DIALOG_DATA, useValue: {}}
+      ]
+    }).compileComponents();
+    fixture = TestBed.createComponent(UserEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/user-edit/user-edit.component.ts
+++ b/src/app/admin-view/account-mgmt/user-edit/user-edit.component.ts
@@ -0,0 +1,59 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormControl, FormGroup } from '@angular/forms';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-user-edit',
+  templateUrl: './user-edit.component.html',
+  styleUrls: ['./user-edit.component.scss']
+})
+export class UserEditComponent {
+  form: FormGroup
+  constructor (public dialogRef: MatDialogRef<UserEditComponent>, @Inject(MAT_DIALOG_DATA) public data: any, readonly ls: LocalStorageService) {
+    if (data == null) {
+      data = {
+        fname: "",
+        surname: "",
+        room: 0,
+        uname: "",
+        admin: 0
+      }
+    }
+    var flags: Array<number> = []
+    if (data.admin) {
+      if ((data.admin & 1) == 1) flags.push(1)
+      if ((data.admin & 2) == 2) flags.push(2)
+      if ((data.admin & 4) == 4) flags.push(4)
+      if ((data.admin & 8) == 8) flags.push(8)
+      if ((data.admin & 16) == 16) flags.push(16)
+      if ((data.admin & 32) == 32) flags.push(32)
+      if ((data.admin & 64) == 64) flags.push(64)
+      if ((data.admin & 128) == 128) flags.push(128)
+    }
+    this.form = new FormGroup({
+      fname: new FormControl(data.fname),
+      surname: new FormControl(data.surname),
+      room: new FormControl<number>(data.room),
+      uname: new FormControl(data.uname),
+      flags: new FormControl<Array<number>>(flags),
+    })
+  }
+
+  protected editUser() {
+    this.dialogRef.close({
+      fname: this.form.get('fname')?.value,
+      surname: this.form.get('surname')?.value,
+      room: this.form.get('room')?.value,
+      uname: this.form.get('uname')?.value,
+      flags: (() => {
+        var value = this.form.get('flags')?.value.reduce((a: number,b: number)=>a+b,0)
+        if (this.ls.capCheck(32)) {
+          return value
+        } else {
+          return undefined
+        }
+      })()
+    })
+  }
+}
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.html
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.html
@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Reset hasła</h1>
+<mat-dialog-content>
+    Czy chcesz zresetować hasło temu użytkownikowi?
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="true" color="warn">Tak</button>
+    <button mat-button mat-dialog-close>Nie</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.scss
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.scss
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.spec.ts
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserResetComponent } from './user-reset.component';
+
+describe('UserResetComponent', () => {
+  let component: UserResetComponent;
+  let fixture: ComponentFixture<UserResetComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserResetComponent]
+    });
+    fixture = TestBed.createComponent(UserResetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/account-mgmt/user-reset/user-reset.component.ts
+++ b/src/app/admin-view/account-mgmt/user-reset/user-reset.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-reset',
+  templateUrl: './user-reset.component.html',
+  styleUrls: ['./user-reset.component.scss']
+})
+export class UserResetComponent {
+
+}
--- a/src/app/admin-view/admin-comm.service.spec.ts
+++ b/src/app/admin-view/admin-comm.service.spec.ts
@@ -0,0 +1,24 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AdminCommService } from './admin-comm.service';
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+describe('AdminCommService', () => {
+  let service: AdminCommService;
+  let httpClient: HttpClient
+  let httpTestingController: HttpTestingController
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ]
+    });
+    service = TestBed.inject(AdminCommService);
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/admin-comm.service.ts
+++ b/src/app/admin-view/admin-comm.service.ts
@@ -0,0 +1,250 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Moment } from 'moment';
+import { environment } from 'src/environments/environment';
+import { Menu } from '../types/menu';
+import { Status } from '../types/status';
+import { Group } from '../types/group';
+import { map, of } from 'rxjs';
+import { Notification } from '../types/notification';
+import { News } from '../types/news';
+import { AKey } from '../types/key';
+import * as moment from 'moment';
+import { IUSettings } from './settings/settings.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminCommService {
+
+  constructor(private http: HttpClient) { }
+
+  //#region Menu
+  menu = {
+    getMenu: (start?: Moment | null, end?: Moment | null) => {
+      if (start && end) {
+        const body = {start: start.toString(), end: end.toString()}
+        return this.http.get<Menu[]>(environment.apiEndpoint+"/admin/menu", {withCredentials: true, params: body})
+      }
+      return
+    },
+
+    getOpts: () => {
+      return this.http.get<any>(environment.apiEndpoint+`/admin/menu/opts`, {withCredentials: true})
+    },
+
+    postMenu: (file: File) => {
+      if (file) {
+        const formData = new FormData();
+        formData.append("menu", file)
+        return this.http.post<Status>(environment.apiEndpoint+"/admin/menu/upload", formData, {withCredentials: true})
+      }
+      return
+    },
+
+    editSn: (id: string, content: Menu['sn']) => {
+      return this.putMenu(id, {sn: content})
+    },
+
+    editOb: (id: string, content: Menu['ob']) => {
+      return this.putMenu(id, {ob: content})
+    },
+
+    editKol: (id: string, content: Menu['kol']) => {
+      return this.putMenu(id, {kol: content})
+    },
+
+    editTitle: (id: string, content: Menu['dayTitle']) => {
+      return this.putMenu(id, {dayTitle: content})
+    },
+
+    print: (start?: Moment | null, end?: Moment | null) => {
+      if (start && end) {
+        const body = {start: start.toString(), end: end.toString()}
+        return this.http.get(environment.apiEndpoint+"/admin/menu/print", {withCredentials: true, params: body, responseType: "text"})
+      }
+      return
+    },
+
+    stat: (day: Moment, m: "ob" | "kol") => {
+      return this.http.get<{y: number, n: number}>(environment.apiEndpoint+`/admin/menu/${day.toISOString()}/votes/${m}`, {withCredentials: true})
+    },
+    new: {
+      single: (day: Moment) => {
+        return this.http.post<Status>(environment.apiEndpoint+`/admin/menu/${day.toISOString()}`, null, {withCredentials: true})
+      },
+      range: (start: Moment, count: number) => {
+        return this.http.post<Status>(environment.apiEndpoint+`/admin/menu/${start.toISOString()}/${count}/`, null, {withCredentials: true})
+      }
+    }
+  }
+  
+  private putMenu(id: string, update: Partial<Menu>) {
+    return this.http.put<Status>(environment.apiEndpoint+`/admin/menu/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region News
+  news = {
+    getNews: () => {
+      return this.http.get<News[]>(environment.apiEndpoint+`/admin/news`, {withCredentials: true})
+    },
+
+    postNews: (title: string, content: string) => {
+      return this.http.post<any>(environment.apiEndpoint+`/admin/news`, {title: title, content: content}, {withCredentials: true})
+    },
+
+    deleteNews: (id: string) => {
+      return this.http.delete<any>(environment.apiEndpoint+`/admin/news/${id}`, {withCredentials: true})
+    },
+
+    toggleNews: (id: string, inverter: boolean) => {
+      return this.putNews(id,{visible: !inverter})
+    },
+
+    togglePin: (id: string, inverter: boolean) => {
+      return this.putNews(id,{pinned: !inverter})
+    },
+
+    updateNews: (id: string, title: string, content: string) => {
+      return this.putNews(id,{title: title, content: content, date: Date.now})
+    }
+  }
+
+  private putNews(id: string, update: object) {
+    return this.http.put<any>(environment.apiEndpoint+`/admin/news/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region amgmt
+  accs = {
+    getAccs: () => {
+      return this.http.get<any[]>(environment.apiEndpoint+`/admin/accs`, {withCredentials: true})
+    },
+
+    postAcc: (item: any) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/accs`, item, {withCredentials: true})
+    },
+
+    putAcc: (id: string, update: object) => {
+      return this.http.put<Status>(environment.apiEndpoint+`/admin/accs/${id}`, update, {withCredentials: true})
+    },
+
+    resetPass: (id: string) => {
+      return this.http.patch<Status>(environment.apiEndpoint+`/admin/accs/${id}/reset`, {}, {withCredentials: true})
+    },
+    
+    deleteAcc: (id: string) => {
+      return this.http.delete<Status>(environment.apiEndpoint+`/admin/accs/${id}`, {withCredentials: true})
+    }
+  }
+  //#endregion
+  //#region Groups
+  groups = {
+    getGroups: () => {
+      return this.http.get<Group[]>(environment.apiEndpoint+`/admin/groups`, {withCredentials: true})
+    },
+    
+    editRooms: (id: string, rooms: number[]) => {
+      return this.putGroups(id, {rooms: rooms})
+    },
+
+    editUsers: (id: string, users: string[]) => {
+      return this.putGroups(id, {unames: users})
+    },
+
+    newGroup: (name: string) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/groups`, {name: name}, {withCredentials: true}) 
+    },
+    
+    editName: (id: string, name: string) => {
+      return this.putGroups(id, {name: name.trim()})
+    },
+
+    remove: (id: string) => {
+      return this.http.delete<Status>(environment.apiEndpoint+`/admin/groups/${id}`, {withCredentials: true})
+    }
+  }
+
+  private putGroups(id: string, update: Partial<Group>) {
+    return this.http.put<Status>(environment.apiEndpoint+`/admin/groups/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region Notif
+  notif = {
+    send: (n: Notification) => {
+      return this.http.post<{sent: number, possible: number}>(environment.apiEndpoint+"/admin/notif/send", n, {withCredentials: true})   
+    },
+    getGroups: () => {
+      return this.http.get<Group[]>(environment.apiEndpoint+"/admin/notif/groups", {withCredentials: true})
+    }
+  }
+  //#endregion
+  //#region Keys
+  keys = {
+    getKeys: () => {
+      return this.http.get<AKey[]>(environment.apiEndpoint+`/admin/keys`, {withCredentials: true}).pipe(map((v) => {
+        return v.map((r) => {
+          r.borrow = moment(r.borrow)
+          if (r.tb) r.tb = moment(r.tb) 
+          return r
+        })
+      }))
+    },
+
+    avalKeys: () => {
+      return this.http.get<string[]>(environment.apiEndpoint+`/admin/keys/available`, {withCredentials: true})
+    },
+
+    postKey: (room: string, uname: string) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/keys/`, {room: room, whom: uname}, {withCredentials: true})
+    },
+
+    returnKey: (id: string) => {
+      return this.putKeys(id, {tb: moment.utc()})
+    }
+  }
+
+  private putKeys(id: string, update: Partial<AKey>) {
+    return this.http.put<Status>(environment.apiEndpoint+`/admin/keys/${id}`, update, {withCredentials: true})
+  }
+  //#endregion
+  //#region Clean
+  clean = {
+    getConfig: () => {
+      return this.http.get<{rooms: number[], things: string[]}>(environment.apiEndpoint+`/admin/clean/config`, {withCredentials: true})
+    },
+    getClean: (date: moment.Moment, room: number) => {
+      return this.http.get<{_id: string, date: string, grade: number, gradeDate: string, notes: {label: string, weight: number}[], room: number, tips: string} | null>(environment.apiEndpoint+`/admin/clean/${date.toISOString()}/${room}`, {withCredentials: true})
+    },
+    postClean: (obj: Object) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/clean/`, obj, {withCredentials: true})
+    },
+    delete: (id: string) => {
+      return this.http.delete<Status>(environment.apiEndpoint+`/admin/clean/${id}`, {withCredentials: true})
+    },
+    summary: {
+      getSummary: (start: moment.Moment, end: moment.Moment) => {
+        return this.http.get<{room: number, avg: number}[]>(environment.apiEndpoint+`/admin/clean/summary/${start.toISOString()}/${end.toISOString()}`, {withCredentials: true})
+      }
+    }
+  }
+  //#endregion
+  //#region Settings
+  settings = {
+    getAll: () => {
+      return this.http.get<IUSettings>(environment.apiEndpoint+`/admin/settings/`, {withCredentials: true})
+    },
+    post: (settings: IUSettings) => {
+      return this.http.post<Status>(environment.apiEndpoint+`/admin/settings/`, settings, {withCredentials: true})
+    },
+    reload: () => {
+      return this.http.get<Status>(environment.apiEndpoint+`/admin/settings/reload/`, {withCredentials: true})
+    }
+  }
+  //#endregion
+
+  //#region misc
+  userFilter = (query: string) => {
+    return this.http.get<any[]>(environment.apiEndpoint+`/admin/usearch`, {params: {q: query}, withCredentials: true})
+  }
+  //#endregion
+}
--- a/src/app/admin-view/admin-view.component.html
+++ b/src/app/admin-view/admin-view.component.html
@@ -0,0 +1,33 @@
+<mat-toolbar color="accent">
+    <button mat-icon-button (click)="drawer.toggle()"><mat-icon>menu</mat-icon></button>
+    <span>{{title.getTitle()}}</span>
+    <span style="flex: 1 1 auto"></span>
+    <button mat-icon-button *ngIf="toolbar.menu" [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
+</mat-toolbar>
+<mat-menu #menu="matMenu">
+    @for (item of toolbar.menu; track $index) {
+        <button mat-menu-item *ngIf="item.check" (click)="toolbar.comp[item.fn]()">
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
+            <span>{{item.title}}</span>
+        </button>
+    }
+</mat-menu>
+<mat-sidenav-container>
+    <mat-sidenav #drawer mode="over" autoFocus="false">
+        <mat-nav-list>
+            @for (link of LINKS; track $index) {
+                <mat-list-item [routerLink]="link.href" routerLinkActive #rla="routerLinkActive" [activated]="rla.isActive">
+                    <mat-icon matListItemIcon>{{link.icon}}</mat-icon>
+                    <a matListItemTitle>{{link.title}}</a>
+                </mat-list-item>
+            }
+            <mat-list-item (click)="goNormal()">
+                <mat-icon matListItemIcon>close</mat-icon>
+                <h4 matListItemTitle>Zakończ edycję</h4>
+            </mat-list-item>
+        </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <router-outlet></router-outlet>
+    </mat-sidenav-content>
+</mat-sidenav-container>
--- a/src/app/admin-view/admin-view.component.scss
+++ b/src/app/admin-view/admin-view.component.scss
@@ -0,0 +1,14 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+mat-sidenav, mat-toolbar {
+    padding: 8pt
+}
+
+mat-sidenav-container {
+    flex-grow: 1;
+}
--- a/src/app/admin-view/admin-view.component.spec.ts
+++ b/src/app/admin-view/admin-view.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminViewComponent } from './admin-view.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatListModule } from '@angular/material/list';
+import { RouterModule } from '@angular/router';
+
+describe('AdminViewComponent', () => {
+  let component: AdminViewComponent;
+  let fixture: ComponentFixture<AdminViewComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AdminViewComponent],
+      imports: [MatToolbarModule, MatIconModule, MatSidenavModule, BrowserAnimationsModule, MatListModule, RouterModule.forRoot([])]
+    });
+    fixture = TestBed.createComponent(AdminViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/admin-view.component.ts
+++ b/src/app/admin-view/admin-view.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { LocalStorageService } from '../services/local-storage.service';
+import { Link } from '../types/link';
+import { ToolbarService } from './toolbar.service';
+
+@Component({
+  selector: 'app-admin-view',
+  templateUrl: './admin-view.component.html',
+  styleUrls: ['./admin-view.component.scss']
+})
+export class AdminViewComponent {
+  private readonly _LINKS: Link[] = [
+    { title: "Wiadomości", icon: "newspaper", href: "news", enabled: this.ls.permChecker(1) && this.ls.capCheck(1) },
+    { title: "Jadłospis", icon: "restaurant_menu", href: "menu", enabled: this.ls.permChecker(2) && this.ls.capCheck(2) },
+    { title: "Wysyłanie powiadomień", icon: "notifications", href: "notifications", enabled: this.ls.permChecker(4) && this.ls.capCheck(4) },
+    { title: "Grupy", icon: "groups", href: "groups", enabled: this.ls.permChecker(8) && this.ls.capCheck(8) },
+    { title: "Zarządzanie kontami", icon: "manage_accounts", href: "accounts", enabled: this.ls.permChecker(16) },
+    { title: "Klucze", icon: "key", href: "keys", enabled: this.ls.permChecker(64) && this.ls.capCheck(32) },
+    { title: "Czystość", icon: "cleaning_services", href: "grades", enabled: this.ls.permChecker(128) && this.ls.capCheck(16) },
+    { title: "Frekwencja", icon: "checklist", href: "attendence", enabled: false },
+    { title: "Ustawienia", icon: "settings_applications", href: "settings", enabled: this.ls.permChecker(32) },
+    { title: "Instrukcje", icon: "description", href: "guide", enabled: true }
+  ];
+  public get LINKS(): Link[] {
+    return this._LINKS.filter(v => v.enabled);
+  }
+  constructor(readonly title: Title, readonly router: Router, readonly ls: LocalStorageService, protected toolbar: ToolbarService) { }
+  goNormal() {
+    this.router.navigateByUrl('app')
+  }
+}
--- a/src/app/admin-view/grades/grades.component.html
+++ b/src/app/admin-view/grades/grades.component.html
@@ -0,0 +1,26 @@
+<app-date-selector [(date)]="date" [filter]="filter" (dateChange)="downloadData()"></app-date-selector>
+<app-room-chooser [rooms]="rooms" (room)="roomNumber($event)"/>
+<form [formGroup]="form">
+    <p>Czystość pokoju {{room}} na dzień {{date.format("dddd")}}</p>
+    <p>Ocena: {{grade}}</p>
+    <button mat-flat-button (click)="downloadData()">Anuluj</button>
+    <!-- <button mat-flat-button (click)="calculate()">Oblicz</button> -->
+    <button mat-flat-button (click)="save()">Zapisz</button>
+    <button mat-raised-button color="warn" (click)="remove()" *ngIf="id">Usuń</button>
+    <div *ngFor="let item of things.controls; let i = index" formArrayName="things" id="things">
+        <div formGroupName="{{i}}">
+            <mat-checkbox formControlName="cb" #cb>
+                <span control="label"></span>
+                <span *ngIf="cb.checked">
+                    <button mat-icon-button (click)="group.sub(i)"><mat-icon>remove</mat-icon></button>
+                    <span control="weight"></span>
+                    <button mat-icon-button (click)="group.add(i)"><mat-icon>add</mat-icon></button>
+                </span>
+            </mat-checkbox>
+        </div>
+    </div>
+    <mat-form-field style="width: 100%;">
+        <mat-label>Dodatkowe uwagi</mat-label>
+        <textarea matNativeControl cdkTextareaAutosize formControlName="tips"></textarea>
+    </mat-form-field>
+</form>
--- a/src/app/admin-view/grades/grades.component.scss
+++ b/src/app/admin-view/grades/grades.component.scss
@@ -0,0 +1,4 @@
+div#things {
+    display: flex;
+    flex-direction: column;
+}
--- a/src/app/admin-view/grades/grades.component.spec.ts
+++ b/src/app/admin-view/grades/grades.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GradesComponent } from './grades.component';
+
+describe('GradesComponent', () => {
+  let component: GradesComponent;
+  let fixture: ComponentFixture<GradesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GradesComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(GradesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/grades/grades.component.ts
+++ b/src/app/admin-view/grades/grades.component.ts
@@ -0,0 +1,157 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import * as moment from 'moment';
+import { FormArray, FormBuilder } from '@angular/forms';
+import { weekendFilter } from 'src/app/fd.da';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ToolbarService } from '../toolbar.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-grades',
+  templateUrl: './grades.component.html',
+  styleUrl: './grades.component.scss'
+})
+export class GradesComponent implements OnInit, OnDestroy {
+  rooms!: number[]
+  room: number = 0;
+  date: moment.Moment;
+  grade: number = 6
+  gradeDate?: moment.Moment;
+  id?: string
+  filter = weekendFilter
+
+  get notes(): { label: string, weight: number }[] {
+    var th = this.things.value as { cb: boolean, label: string, weight: number }[]
+    return th.filter((v) => v.cb).map((v) => {
+      return { ...v, cb: undefined }
+    })
+  }
+
+  set notes(value: { label: string, weight: number }[]) {
+    var things = this.things.controls
+    things.forEach((v) => {
+      var thing = value.find((s) => s.label == v.get('label')?.value)
+      if (thing) {
+        v.get('cb')?.setValue(true)
+        v.get('weight')?.setValue(thing.weight)
+      } else {
+        v.get('cb')?.setValue(false)
+        v.get('weight')?.setValue(1)
+      }
+    })
+  }
+
+  constructor(private ac: AdminCommService, private fb: FormBuilder, private sb: MatSnackBar, private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute) {
+    this.date = moment.utc().startOf('day')
+    if (!this.filter(this.date)) this.date.isoWeekday(8);
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      { title: "Podsumowanie", check: true, fn: "summary", icon: "analytics" }
+    ]
+    this.form.valueChanges.subscribe((v) => {
+      this.calculate()
+    })
+  }
+
+  form = this.fb.group({
+    things: this.fb.array([]),
+    tips: this.fb.control("")
+  })
+
+  get things() {
+    return this.form.get('things') as FormArray
+  }
+
+  summary() {
+    this.router.navigate(["summary"], { relativeTo: this.route })
+  }
+
+  ngOnInit(): void {
+    this.ac.clean.getConfig().subscribe((s) => {
+      this.rooms = s.rooms
+      s.things.forEach((s) => this.things.push(this.fb.group({
+        cb: this.fb.control(false),
+        label: this.fb.control(s),
+        weight: this.fb.control(1)
+      })))
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.toolbar.comp = undefined
+    this.toolbar.menu = undefined
+  }
+
+  downloadData() {
+    this.ac.clean.getClean(this.date, this.room).subscribe((v) => {
+      if (v) {
+        this.notes = v.notes
+        this.gradeDate = moment(v.gradeDate)
+        this.grade = v.grade
+        this.id = v._id
+        this.form.get("tips")?.setValue(v.tips)
+      } else {
+        this.gradeDate = undefined
+        this.grade = 6
+        this.notes = []
+        this.id = undefined
+        this.form.get("tips")?.setValue("")
+      }
+    })
+  }
+
+  calculate() {
+    this.grade = 6
+    this.things.controls.forEach(s => {
+      if (s.get('cb')?.value) this.grade -= 1 * s.get('weight')?.value
+      if (this.grade < 0) this.grade = 0
+    })
+  }
+
+  group = {
+    add: (index: number) => {
+      var weight = this.things.at(index).get('weight')!
+      weight.setValue(weight.value + 1)
+    },
+    sub: (index: number) => {
+      var weight = this.things.at(index).get('weight')!
+      if (weight.value < 1) {
+        weight.setValue(1)
+      } else {
+        if (weight.value - 1 < 1) {
+          weight.setValue(1)
+        } else {
+          weight.setValue(weight.value - 1)
+        }
+      }
+    }
+  }
+
+  save() {
+    this.calculate()
+    var obj = {
+      grade: this.grade,
+      date: this.date.toDate(),
+      room: this.room,
+      notes: this.notes,
+      tips: this.form.get("tips")?.value
+    }
+    this.ac.clean.postClean(obj).subscribe((s) => {
+      this.sb.open("Zapisano!", undefined, { duration: 1500 })
+    })
+  }
+
+  remove() {
+    this.ac.clean.delete(this.id!).subscribe((s) => {
+      if (s.status == 200) {
+        this.downloadData()
+      }
+    })
+  }
+
+  roomNumber(value: number) {
+    this.room = value
+    this.downloadData()
+  }
+}
--- a/src/app/admin-view/grades/summary/summary.component.html
+++ b/src/app/admin-view/grades/summary/summary.component.html
@@ -0,0 +1,25 @@
+<div>
+    <mat-form-field>
+        <mat-label>Wybierz tydzień</mat-label>
+        <mat-date-range-input [rangePicker]="picker" [formGroup]="dateSelector">
+            <input matStartDate formControlName="start">
+            <input matEndDate formControlName="end">
+        </mat-date-range-input>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
+    <button mat-icon-button><mat-icon>query_stats</mat-icon></button>
+</div>
+<table mat-table [dataSource]="data" matSort>
+    <div matColumnDef="room">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Pokój</th>
+        <td mat-cell *matCellDef="let item">{{item.room}}</td>
+    </div>
+    <div matColumnDef="avg">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Średnia</th>
+        <td mat-cell *matCellDef="let item">{{item.avg}}</td>
+    </div>
+
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let rowData; columns: collumns"></tr>
+</table>
--- a/src/app/admin-view/grades/summary/summary.component.scss
+++ b/src/app/admin-view/grades/summary/summary.component.scss
--- a/src/app/admin-view/grades/summary/summary.component.spec.ts
+++ b/src/app/admin-view/grades/summary/summary.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryComponent } from './summary.component';
+
+describe('SummaryComponent', () => {
+  let component: SummaryComponent;
+  let fixture: ComponentFixture<SummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SummaryComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/grades/summary/summary.component.ts
+++ b/src/app/admin-view/grades/summary/summary.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ToolbarService } from '../../toolbar.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AdminCommService } from '../../admin-comm.service';
+import * as moment from 'moment';
+import { MatTableDataSource } from '@angular/material/table';
+import { FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'app-summary',
+  templateUrl: './summary.component.html',
+  styleUrl: './summary.component.scss'
+})
+export class SummaryComponent implements OnInit, OnDestroy {
+
+  data: MatTableDataSource<{room: number, avg: number}> = new MatTableDataSource<{room: number, avg: number}>();
+  collumns = ['room', 'avg']
+
+  dateSelector = this.fb.group({
+    start: this.fb.control(moment.utc().startOf('day')),
+    end: this.fb.control(moment.utc().endOf('day'))
+  })
+
+  constructor (private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute, private ac: AdminCommService, private fb: FormBuilder) {
+    this.toolbar.comp = this
+    this.toolbar.menu = [
+      {check: true, title: "Ocenianie", fn: "goBack", icon: "arrow_back"}
+    ]
+    this.dateSelector.valueChanges.subscribe((v) => {
+      this.download()
+    })
+  }
+  ngOnInit(): void {
+    this.download()
+  }
+  
+  download() {
+    this.ac.clean.summary.getSummary(this.dateSelector.get('start')?.value!.startOf('day')!, this.dateSelector.get('end')?.value!.endOf('day')!).subscribe((v) => {
+      this.data.data = v
+    })
+  }
+  
+  goBack() {
+    this.router.navigate(['../'], {relativeTo: this.route})
+  }
+
+  ngOnDestroy(): void {
+    this.toolbar.comp = undefined
+    this.toolbar.menu = undefined
+  }
+  
+}
--- a/src/app/admin-view/groups/groups.component.html
+++ b/src/app/admin-view/groups/groups.component.html
@@ -0,0 +1,25 @@
+<button mat-raised-button color="accent" (click)="newGroup()">Nowa grupa</button>
+<mat-card *ngFor="let item of groups">
+    <mat-card-header>
+        <mat-card-title contenteditable appCe (edit)="nameEdit(item._id, $event)">{{item.name}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <table>
+            <thead>
+                <tr>
+                    <th>Pokoje</th>
+                    <th>Użytkownicy</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><app-list-editor [converter]="item.rooms" (edit)="editRooms(item._id, $event)"/></td>
+                    <td><app-list-editor [converter]="item.unames"/></td>
+                </tr>
+            </tbody>
+        </table>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-button color="warn" (click)="remove(item._id)">Usuń</button>
+    </mat-card-actions>
+</mat-card>
--- a/src/app/admin-view/groups/groups.component.scss
+++ b/src/app/admin-view/groups/groups.component.scss
@@ -0,0 +1,12 @@
+:host {
+    display: flex;
+}
+
+mat-card {
+    margin: 15px;
+    padding: 1ch;
+}
+
+mat-card-title {
+    font-size: 1.5rem;
+}
--- a/src/app/admin-view/groups/groups.component.spec.ts
+++ b/src/app/admin-view/groups/groups.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupsComponent } from './groups.component';
+
+describe('GroupsComponent', () => {
+  let component: GroupsComponent;
+  let fixture: ComponentFixture<GroupsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GroupsComponent]
+    });
+    fixture = TestBed.createComponent(GroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/groups/groups.component.ts
+++ b/src/app/admin-view/groups/groups.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import { Group } from 'src/app/types/group';
+import { Status } from 'src/app/types/status';
+import { MatDialog } from '@angular/material/dialog';
+import { RemoveConfirmComponent } from './remove-confirm/remove-confirm.component';
+
+@Component({
+  selector: 'app-groups',
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.scss']
+})
+export class GroupsComponent implements OnInit {
+  groups?: Group[]
+  constructor (protected readonly acs: AdminCommService, private readonly dialog: MatDialog) {}
+  ngOnInit(): void {
+    this.acs.groups.getGroups().subscribe((v) => {
+      this.groups = v
+    })
+  }
+
+  private refreshIfGood(s: Status) {
+    if (s.status.toString().match(/2\d\d/)) {
+      this.ngOnInit()
+    }
+  }
+
+  get groupOptions(): {id: string, text: string}[] {
+    return this.groups!.map((v)=> {return {id: v._id as string, text: v.name as string}})
+  }
+
+  protected getId(g: Group[] | undefined) {
+    if (!g) return undefined
+    return g.map((v)=>v._id)
+  }
+
+  groupNames(groups: Group[]) {
+    return groups.flatMap((g) => g.name)
+  }
+
+  protected editRooms(id: string, rooms: string[]) {
+    this.acs.groups.editRooms(id, rooms.map(Number)).subscribe((s) => this.refreshIfGood(s))
+  }
+
+  protected editUsers(id: string, users: string[]) {
+    this.acs.groups.editUsers(id, users).subscribe((s) => this.refreshIfGood(s))
+  }
+
+  protected nameEdit(id: string, name: string | string[]) {
+    name = name as string
+    this.acs.groups.editName(id, name).subscribe((s) => this.refreshIfGood(s))
+  }
+
+  protected newGroup() {
+    let name = prompt("Nazwa grupy")
+    if (name) {
+      this.acs.groups.newGroup(name).subscribe((s) => this.refreshIfGood(s))
+    }
+  }
+  
+  protected remove(id: string) {
+    this.dialog.open(RemoveConfirmComponent).afterClosed().subscribe((v) => {
+      if (v) {
+        this.acs.groups.remove(id).subscribe((s) => this.refreshIfGood(s))
+      }
+    })
+  }
+}
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.html
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.html
@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Czy chcesz usunąć tą grupę?</h1>
+<mat-dialog-content>
+    Ta akcja jest nieodwracalna!
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Nie</button>
+    <button mat-button mat-dialog-close="yes" color="warn">Tak</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.scss
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.scss
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.spec.ts
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemoveConfirmComponent } from './remove-confirm.component';
+
+describe('RemoveConfirmComponent', () => {
+  let component: RemoveConfirmComponent;
+  let fixture: ComponentFixture<RemoveConfirmComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RemoveConfirmComponent]
+    });
+    fixture = TestBed.createComponent(RemoveConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/groups/remove-confirm/remove-confirm.component.ts
+++ b/src/app/admin-view/groups/remove-confirm/remove-confirm.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-remove-confirm',
+  templateUrl: './remove-confirm.component.html',
+  styleUrls: ['./remove-confirm.component.scss']
+})
+export class RemoveConfirmComponent {
+
+}
--- a/src/app/admin-view/key/key.component.html
+++ b/src/app/admin-view/key/key.component.html
@@ -0,0 +1,42 @@
+<div id="upper-bar">
+    <mat-form-field>
+        <mat-label>Wyszukaj</mat-label>
+        <input matInput (keyup)="filter($event)">
+    </mat-form-field>
+    <mat-chip-listbox [(ngModel)]="filters" multiple>
+        <mat-chip-option value="showAll">Pokaż wszystko</mat-chip-option>
+    </mat-chip-listbox>
+    <button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
+</div>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<table mat-table [dataSource]="keys">
+    <div matColumnDef="room">
+        <th mat-header-cell *matHeaderCellDef>Sala</th>
+        <td mat-cell *matCellDef="let element">{{element.room}}</td>
+    </div>
+    <div matColumnDef="whom">
+        <th mat-header-cell *matHeaderCellDef>Wypożyczający</th>
+        <td mat-cell *matCellDef="let element">{{element.whom.uname}}</td>
+    </div>
+    <div matColumnDef="borrow">
+        <th mat-header-cell *matHeaderCellDef>Data wypożyczenia</th>
+        <td mat-cell *matCellDef="let element">{{element.borrow.format("HH:mm, ddd D.MM.")}}</td>
+    </div>
+    <div matColumnDef="tb">
+        <th mat-header-cell *matHeaderCellDef>Data zwrotu</th>
+        <td mat-cell *matCellDef="let element">
+            @if (element.tb) {
+                {{element.tb.format("HH:mm, ddd D.MM.")}}
+            }
+        </td>
+    </div>
+    <div matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Akcje</th>
+        <td mat-cell *matCellDef="let element">
+            <button mat-mini-fab (click)="tb(element._id)" *ngIf="!element.tb"><mat-icon>person_cancel</mat-icon></button>
+        </td>
+    </div>
+    <tr mat-header-row *matHeaderRowDef="collumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: collumns"></tr>
+</table>
+<mat-paginator pageSize="9" [pageSizeOptions]="[9, 15, 20, 50, 160]"></mat-paginator>
--- a/src/app/admin-view/key/key.component.scss
+++ b/src/app/admin-view/key/key.component.scss
@@ -0,0 +1,5 @@
+#upper-bar {
+    display: flex;
+    align-items: baseline;
+    gap: 4pt;
+}
--- a/src/app/admin-view/key/key.component.spec.ts
+++ b/src/app/admin-view/key/key.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminKeyComponent } from './key.component';
+
+describe('KeyComponent', () => {
+  let component: AdminKeyComponent;
+  let fixture: ComponentFixture<AdminKeyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminKeyComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AdminKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/key/key.component.ts
+++ b/src/app/admin-view/key/key.component.ts
@@ -0,0 +1,90 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import * as moment from 'moment';
+import { AKey } from 'src/app/types/key';
+import { AdminCommService } from '../admin-comm.service';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { NewKeyComponent } from './new-key/new-key.component';
+
+@Component({
+  selector: 'app-admin-key',
+  templateUrl: './key.component.html',
+  styleUrl: './key.component.scss'
+})
+export class AdminKeyComponent implements AfterViewInit, OnInit {
+  keys: MatTableDataSource<AKey> = new MatTableDataSource<AKey>();
+  pureData: AKey[] = []
+  private _filters: string[] = [];
+  public get filters(): string[] {
+    return this._filters;
+  }
+  collumns = ['room', 'whom', 'borrow', 'tb', 'actions']
+  public set filters(value: string[]) {
+    if (value.includes("showAll")) {
+      this.collumns = ['room', 'whom', 'borrow', 'tb', 'actions']
+    } else {
+      this.collumns = ['room', 'whom', 'borrow', 'actions']
+    }
+    this._filters = value;
+    this.transformData();
+  }
+  loading = true
+  @ViewChild(MatPaginator) paginator!: MatPaginator
+  
+  constructor (private ac: AdminCommService, private dialog: MatDialog) {
+    this.filters = []
+  }
+  
+  fetchData() {
+    this.loading = true
+    this.ac.keys.getKeys().subscribe((r) => {
+      this.loading = false
+      this.pureData = r
+      this.transformData()
+    })
+  }
+
+  transformData() {
+    var finalData: AKey[] = this.pureData
+    if (!this.filters.includes('showAll')) finalData = finalData.filter((v) => v.tb == undefined)
+    this.keys.data = finalData
+  }
+  
+  filter(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.keys.filter = value.toLowerCase().trim()
+  }
+  
+  ngAfterViewInit(): void {
+    this.keys.paginator = this.paginator
+  }
+
+  ngOnInit(): void {
+    this.fetchData()
+    // [
+    //   {room: "Kawiarenka", borrow: moment().subtract(15, "minutes"), whom: {_id: "test", room: 303, uname: "sk"}}
+    // ]
+  }
+  
+  new() {
+    this.dialog.open(NewKeyComponent).afterClosed().subscribe(v => {
+      if (v) {
+        this.ac.keys.postKey(v.room, v.user).subscribe((s) => {
+          if (s.status == 201) {
+            this.fetchData()
+          }
+        })
+      }
+    })
+  }
+  
+  tb(id: string) {
+    this.ac.keys.returnKey(id).subscribe((r) => {
+      if (r.status == 200) {
+        this.fetchData()
+      }
+    })
+  }
+}
--- a/src/app/admin-view/key/new-key/new-key.component.html
+++ b/src/app/admin-view/key/new-key/new-key.component.html
@@ -0,0 +1,27 @@
+<mat-dialog-content>
+    <form (ngSubmit)="send()" [formGroup]="form">
+        <mat-form-field>
+            <mat-label>Sala</mat-label>
+            <mat-select formControlName="room" required>
+                @for (item of rooms; track $index) {
+                    <mat-option [value]="item">{{item}}</mat-option>
+                }
+            </mat-select>
+            <mat-error *ngIf="form.controls['room'].hasError('required')">Wymagane</mat-error>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Wypożyczający</mat-label>
+            <!-- TODO: Add user selector -->
+            <input matInput placeholder="Nazwa użytkownika" formControlName="user" required>
+            <!-- <input #input matInput placeholder="Nazwa użytkownika" formControlName="user" required [matAutocomplete]="auto" (input)="filter()">
+            <mat-autocomplete requireSelection #auto="matAutocomplete">
+                @for (item of unames; track item) {
+                    <mat-option [value]="item">{{item}}</mat-option>
+                }
+            </mat-autocomplete> -->
+            <mat-error *ngIf="form.controls['user'].hasError('unf')">Zła nazwa użytkownika</mat-error>
+            <mat-error *ngIf="form.controls['user'].hasError('required')">Wymagane</mat-error>
+        </mat-form-field>
+        <button mat-button>Wyślij</button>
+    </form>
+</mat-dialog-content>
--- a/src/app/admin-view/key/new-key/new-key.component.scss
+++ b/src/app/admin-view/key/new-key/new-key.component.scss
@@ -0,0 +1,4 @@
+form {
+    display: flex;
+    flex-direction: column;
+}
--- a/src/app/admin-view/key/new-key/new-key.component.spec.ts
+++ b/src/app/admin-view/key/new-key/new-key.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewKeyComponent } from './new-key.component';
+
+describe('NewKeyComponent', () => {
+  let component: NewKeyComponent;
+  let fixture: ComponentFixture<NewKeyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewKeyComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/key/new-key/new-key.component.ts
+++ b/src/app/admin-view/key/new-key/new-key.component.ts
@@ -0,0 +1,49 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AdminCommService } from '../../admin-comm.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { FormControl, FormGroup } from '@angular/forms';
+import { startWith } from 'rxjs';
+
+@Component({
+  selector: 'app-new-key',
+  templateUrl: './new-key.component.html',
+  styleUrl: './new-key.component.scss'
+})
+export class NewKeyComponent implements OnInit {
+  // @ViewChild('input') input!: ElementRef<HTMLInputElement>
+  rooms: string[] = []
+  form = new FormGroup({
+    room: new FormControl<string>(""),
+    user: new FormControl<string>("")
+  })
+  unames: any[] = []
+  constructor ( private ac: AdminCommService, public dialogRef: MatDialogRef<NewKeyComponent> ) {}
+
+  ngOnInit(): void {
+    this.ac.keys.avalKeys().subscribe((v) => {
+      this.rooms = v
+    })
+  }
+  
+  // filter() {
+  //   const v = this.input.nativeElement.value
+  //   console.log(v);
+    
+  //   if (v) {
+  //     this.ac.userFilter(v.toLowerCase()).subscribe((v) => {
+  //       this.unames = v
+  //     })
+  //   } else {
+  //     this.unames = []
+  //   }
+  // }
+
+  send() {
+    if (this.form.valid) {
+      this.dialogRef.close(this.form.value)
+    } else {
+      this.form.controls['user'].setErrors({unf: true})
+    }
+  }
+
+}
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.html
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.html
@@ -0,0 +1,33 @@
+<h1 mat-dialog-title>Dodawanie</h1>
+<mat-dialog-content>
+    <mat-radio-group [(ngModel)]="type">
+        <mat-radio-button value="day">Dzień</mat-radio-button>
+        <mat-radio-button value="week">Tydzień</mat-radio-button>
+        <mat-radio-button value="file">Plik</mat-radio-button>
+    </mat-radio-group>
+    <div>
+        @switch (type) {
+            @case ("day") {
+                <app-date-selector [filter]="filter" [(date)]="day"></app-date-selector>
+            }
+            @case ("week") {
+                <mat-form-field>
+                    <mat-label>Wybierz tydzień</mat-label>
+                    <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
+                        <input matStartDate formControlName="start">
+                        <input matEndDate formControlName="end">
+                    </mat-date-range-input>
+                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                </mat-form-field>
+            }
+            @case ("file") {
+                <button mat-flat-button color="accent" (click)="activateUpload()">Otwórz okno</button>
+            }
+        }
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button color="accent" (click)="submit()">Wyślij</button>
+    <button mat-button mat-dialog-close>Anuluj</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.scss
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.scss
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.spec.ts
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuAddComponent } from './menu-add.component';
+
+describe('MenuAddComponent', () => {
+  let component: MenuAddComponent;
+  let fixture: ComponentFixture<MenuAddComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MenuAddComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MenuAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/menu-new/menu-add/menu-add.component.ts
+++ b/src/app/admin-view/menu-new/menu-add/menu-add.component.ts
@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { MenuUploadComponent } from '../menu-upload/menu-upload.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { FDSelection, weekendFilter } from 'src/app/fd.da';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Moment } from 'moment';
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-menu-add',
+  templateUrl: './menu-add.component.html',
+  styleUrl: './menu-add.component.scss',
+  providers: [
+    {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection}
+  ]
+})
+export class MenuAddComponent {
+  type: string | undefined;
+  filter = weekendFilter
+
+  day: Moment = moment.utc();
+
+  range = new FormGroup({
+    start: new FormControl<Moment|null>(null),
+    end: new FormControl<Moment|null>(null),
+  })
+
+  constructor (public dialogRef: MatDialogRef<MenuAddComponent>, private dialog: MatDialog) { }
+
+  submit() {
+    switch (this.type) {
+      case "day":
+        this.dialogRef.close({type: "day", value: this.day.utc()})
+        break;
+      case "week":
+        this.dialogRef.close({type: "week", value: {start: this.range.value.start?.utc().hours(24), count: 5}})
+        break;
+      default:
+        break;
+    }
+  }
+
+  activateUpload() {
+    this.dialog.open(MenuUploadComponent).afterClosed().subscribe((data) => {
+      if (data) {
+        this.dialogRef.close({type: "file", ...data});
+      }
+    })
+  }
+}
--- a/src/app/admin-view/menu-new/menu-new.component.html
+++ b/src/app/admin-view/menu-new/menu-new.component.html
@@ -0,0 +1,111 @@
+<div id="upper-bar">
+    <mat-form-field>
+        <mat-label>Wybierz tydzień</mat-label>
+        <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
+            <input matStartDate formControlName="start" (dateChange)="requestData()">
+            <input matEndDate formControlName="end" (dateChange)="requestData()">
+        </mat-date-range-input>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
+    <button mat-icon-button (click)="requestData()"><mat-icon>refresh</mat-icon></button>
+    <button mat-icon-button (click)="addDate()"><mat-icon>add</mat-icon></button>
+    <button mat-icon-button (click)="print()"><mat-icon>print</mat-icon></button>
+</div>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<table mat-table [dataSource]="dataSource">
+    <div matColumnDef="day">
+        <th mat-header-cell *matHeaderCellDef>Dzień</th>
+        <td mat-cell *matCellDef="let element">
+            <span>{{element.day.format('DD.MM.YYYY')}}r.</span>
+            <p>{{element.day.format('dddd')}}</p>
+            <app-field-editor category="Nazwa" [(word)]="element.dayTitle" (wordChange)="editTitle(element._id)"/><br><hr>
+            <button>Usuń dzień</button>
+        </td>
+    </div>
+    <div matColumnDef="sn">
+        <th mat-header-cell *matHeaderCellDef>Śniadanie</th>
+        <td mat-cell *matCellDef="let element">
+            <ul class="non-editable">
+                <li *ngFor="let i of ls.defaultItems.sn">{{i}}</li>
+            </ul><hr>
+            <app-list-editor [(list)]="element.sn.fancy" (edit)="editSn(element._id)" dataList="sn-fancy"/><hr>
+            <ul>
+                <li><app-field-editor category="II Śniadanie" [(word)]="element.sn.second" list="sn-second" (wordChange)="editSn(element._id)"/></li>
+            </ul>
+        </td>
+    </div>
+    <div matColumnDef="ob">
+        <th mat-header-cell *matHeaderCellDef>Obiad</th>
+        <td mat-cell *matCellDef="let element">
+            <ul>
+                <li><app-field-editor category="Zupa" [(word)]="element.ob.soup" list="ob-soup" (wordChange)="editOb(element._id)"/></li>
+                <li><app-field-editor category="Vege" [(word)]="element.ob.vege" list="ob-vege" (wordChange)="editOb(element._id)"/></li>
+                <li><app-field-editor category="Danie główne" [(word)]="element.ob.meal" list="ob-meal" (wordChange)="editOb(element._id)"/></li>
+            </ul><hr>
+            <app-list-editor [(list)]="element.ob.condiments" (edit)="editOb(element._id)" dataList="ob-condiments"/><hr>
+            <ul>
+                <li><app-field-editor category="Napój" [(word)]="element.ob.drink" list="ob-drink" (wordChange)="editOb(element._id)"/></li>
+            </ul><hr>
+            <app-list-editor [(list)]="element.ob.other" (edit)="editOb(element._id)" dataList="ob-other"/>
+            <button (click)="getStat(element.day, 'ob')">
+                Opinie wychowanków
+            </button>
+        </td>
+    </div>
+    <div matColumnDef="kol">
+        <th mat-header-cell *matHeaderCellDef>Kolacja</th>
+        <td mat-cell *matCellDef="let element">
+            <div [ngSwitch]="element.day.isoWeekday()">
+                <div *ngSwitchDefault>
+                    <ul class="non-editable">
+                        <li *ngFor="let i of ls.defaultItems.kol">{{i}}</li>
+                    </ul><hr>
+                    <ul>
+                        <li><app-field-editor category="Kolacja" [(word)]="element.kol" list="kol" (wordChange)="editKol(element._id)"/></li>
+                    </ul>
+                    <button (click)="getStat(element.day, 'kol')">
+                        Opinie wychowanków
+                    </button>
+                </div>
+                <div *ngSwitchCase="5" class="non-editable">
+                    <p>Kolacja w domu!</p>
+                    <p>(Nie edytowalne)</p>
+                </div>
+            </div>
+        </td>
+    </div>
+    
+    <tr mat-header-row *matHeaderRowDef="dcols"></tr>
+    <tr mat-row *matRowDef="let row; columns: dcols"></tr>
+</table>
+
+<ng-component *ngIf="options">
+    <datalist id="sn-fancy">
+        <option *ngFor="let i of options.sn.fancy">{{i}}</option>
+    </datalist>
+    <datalist id="sn-second">
+        <option *ngFor="let i of options.sn.second">{{i}}</option>
+    </datalist>
+    <datalist id="ob-soup">
+        <option *ngFor="let i of options.ob.soup">{{i}}</option>
+    </datalist>
+    <datalist id="ob-vege">
+        <option *ngFor="let i of options.ob.vege">{{i}}</option>
+    </datalist>
+    <datalist id="ob-meal">
+        <option *ngFor="let i of options.ob.meal">{{i}}</option>
+    </datalist>
+    <datalist id="ob-condiments">
+        <option *ngFor="let i of options.ob.condiments">{{i}}</option>
+    </datalist>
+    <datalist id="ob-drink">
+        <option *ngFor="let i of options.ob.drink">{{i}}</option>
+    </datalist>
+    <datalist id="ob-other">
+        <option *ngFor="let i of options.ob.other">{{i}}</option>
+    </datalist>
+    <datalist id="kol">
+        <option *ngFor="let i of options.kol">{{i}}</option>
+    </datalist>
+</ng-component>
--- a/src/app/admin-view/menu-new/menu-new.component.scss
+++ b/src/app/admin-view/menu-new/menu-new.component.scss
@@ -0,0 +1,18 @@
+#upper-bar {
+    display: flex;
+}
+
+mat-form-field {
+    flex-grow: 1;
+}
+
+button[mat-icon-button] {
+    margin-left: 4pt;
+    margin-right: 4pt;
+    margin-top: 4pt;
+}
+
+.non-editable {
+    color: gray;
+    font-style: italic;
+}
--- a/src/app/admin-view/menu-new/menu-new.component.spec.ts
+++ b/src/app/admin-view/menu-new/menu-new.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuNewComponent } from './menu-new.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FDSelection } from 'src/app/fd.da';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AdminCommService } from '../admin-comm.service';
+import { of } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+
+describe('MenuNewComponent', () => {
+  let component: MenuNewComponent;
+  let fixture: ComponentFixture<MenuNewComponent>;
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService', {
+      getMenu: of()
+    })
+    TestBed.configureTestingModule({
+      declarations: [MenuNewComponent],
+      imports: [MatTableModule, MatInputModule, MatDatepickerModule, BrowserAnimationsModule, ReactiveFormsModule, MatDialogModule, MatIconModule],
+      providers: [
+        {provide: DateAdapter, useClass: MomentDateAdapter},
+        {provide: MAT_DATE_LOCALE, useValue: "pl-PL"},
+        {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, 
+        {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}},
+        {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection},
+        {provide: AdminCommService, useValue: acMock}
+      ],
+    });
+    fixture = TestBed.createComponent(MenuNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/menu-new/menu-new.component.ts
+++ b/src/app/admin-view/menu-new/menu-new.component.ts
@@ -0,0 +1,127 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
+import { Moment } from 'moment';
+import { FDSelection } from 'src/app/fd.da';
+import { Menu } from 'src/app/types/menu';
+import { AdminCommService } from '../admin-comm.service';
+import { MatTableDataSource } from '@angular/material/table';
+import * as moment from 'moment';
+import { MatDialog } from '@angular/material/dialog';
+import { MenuUploadComponent } from './menu-upload/menu-upload.component';
+import { Status } from 'src/app/types/status';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MenuAddComponent } from './menu-add/menu-add.component';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-menu-new',
+  templateUrl: './menu-new.component.html',
+  styleUrls: ['./menu-new.component.scss'],
+  providers: [
+    {provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection}
+  ]
+})
+export class MenuNewComponent {
+  dcols: string[] = ['day', 'sn', 'ob', 'kol']
+  dataSource: MatTableDataSource<Menu> = new MatTableDataSource<Menu>()
+  range = new FormGroup({
+    start: new FormControl<Moment|null>(null),
+    end: new FormControl<Moment|null>(null),
+  })
+  loading = false
+  public options: any;
+
+  constructor (private ac: AdminCommService, private dialog: MatDialog, private sb: MatSnackBar, readonly ls: LocalStorageService) { 
+    moment.updateLocale('pl', {
+      weekdays: ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota"]
+    })
+  }
+
+  print() {
+    this.ac.menu.print(this.range.value.start, this.range.value.end)?.subscribe((r) => {
+      if (r && r.length > 0) {
+        var mywindow = window.open(undefined, 'Drukowanie', 'height=400,width=400')
+        mywindow?.document.write(r)
+        mywindow?.print()
+        mywindow?.close()
+      }
+    })
+  }
+
+  addDate() {
+    this.dialog.open(MenuAddComponent).afterClosed().subscribe((data) => {
+      if (data) {
+        switch (data.type) {
+          case "day":
+            this.ac.menu.new.single(data.value).subscribe()
+            break;
+          case "week":
+            this.ac.menu.new.range(data.value.start, data.value.count).subscribe()
+            break;
+          case "file":
+            this.requestData()
+            break;
+          default:
+            break;
+        }
+      }
+    })
+  }
+  
+  requestData() {
+    this.loading = true
+    this.ac.menu.getOpts().subscribe((o) => {
+      this.options = o;
+    })
+    this.ac.menu.getMenu(this.range.value.start, this.range.value.end)?.subscribe((data) => {
+      this.loading = false
+      this.dataSource.data = data.map((v) => {
+        let newMenu: Menu = {
+          ...v,
+          day: moment.utc(v.day)
+        }
+        return newMenu
+      })
+    })
+  }
+
+  private refreshIfGood(s: Status) {
+    if (s.status == 200) {
+      this.requestData()
+    }
+  }
+  
+  activateUpload() {
+    this.dialog.open(MenuUploadComponent).afterClosed().subscribe((data) => {
+      if (data) {
+        this.requestData()
+      }
+    })
+  }
+
+  editDay(v: string | string[], element: Menu) {
+    v = v as string
+    element.day = moment(v, "DD.MM.YYYY", true).utc(true).startOf('day')
+  }
+
+  editSn(id: string) {
+    this.ac.menu.editSn(id, this.dataSource.data.find(v => v._id == id)?.sn).subscribe(this.refreshIfGood)
+  }
+
+  editOb(id: string) {
+    this.ac.menu.editOb(id, this.dataSource.data.find(v => v._id == id)?.ob).subscribe(this.refreshIfGood)
+  }
+
+  editKol(id: string) {
+    this.ac.menu.editKol(id, this.dataSource.data.find(v => v._id == id)?.kol).subscribe(this.refreshIfGood)
+  }
+
+  editTitle(id: string) {
+    this.ac.menu.editTitle(id, this.dataSource.data.find(v => v._id == id)?.dayTitle).subscribe(this.refreshIfGood)
+  }
+
+  getStat(day: moment.Moment, m: "ob" | "kol") {
+    this.ac.menu.stat(day, m).subscribe((s) => this.sb.open(`${s.y} / ${s.y+s.n} = ${((s.y/(s.y+s.n))*100).toFixed(2)}%`, "Zamknij", {duration: 2500}))
+  }
+}
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.html
+++ b/src/app/admin-view/menu-new/menu-upload/menu-upload.component.html
@@ -0,0 +1,20 @@
+<h1 mat-dialog-title>Import z pliku</h1>
+<mat-dialog-content>
+    <input type="file" name="menu" #fu style="display: none;" (change)="onFileChange($event)" accept=".xlsx,.ods,application/vnd.oasis.opendocument.spreadsheet">
+    <button mat-raised-button color="accent" (click)="fu.click()">Wybierz plik</button>
+    <div style="color: red;">
+        <h1>UWAGA!</h1>
+        <h3>Przed wysłaniem upewnij się że</h3>
+        <ul>
+            <li>Daty w pliku są prawidłowe i poprawnie sformatowane (DD.MM.RRRR)</li>
+            <li>Wszystkie pozycje w menu są w osobnych linijkach</li>
+            <li>Załączony dokument to arkusz w formacie XLSX lub ODS</li>
+        </ul>
+        <h2>Nie spełnienie któregokolwiek z tych wymagań może skutkować szkodami w programie!</h2>
+        <h3>Późniejsza modyfikacja danych jest niemożliwa w tej wersji programu.</h3>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button color="warn" [disabled]="file == undefined" (click)="submit()">Wyślij</button>
+    <button mat-button mat-dialog-close>Anuluj</button>
+</mat-dialog-actions>
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.scss
+++ b/src/app/admin-view/menu-new/menu-upload/menu-upload.component.scss
@@ -0,0 +1,4 @@
+:host {
+    margin: 8pt;
+    display: block;
+}
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.spec.ts
+++ b/src/app/admin-view/menu-new/menu-upload/menu-upload.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuUploadComponent } from './menu-upload.component';
+import { AdminCommService } from '../../admin-comm.service';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+
+describe('MenuUploadComponent', () => {
+  let component: MenuUploadComponent;
+  let fixture: ComponentFixture<MenuUploadComponent>;
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService', ['postMenu'])
+    TestBed.configureTestingModule({
+      declarations: [MenuUploadComponent],
+      providers: [
+        {provide: AdminCommService, useValue: acMock},
+        {provide: MatDialogRef, useValue: {}}
+      ],
+      imports: [MatDialogModule]
+    });
+    fixture = TestBed.createComponent(MenuUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/menu-new/menu-upload/menu-upload.component.ts
+++ b/src/app/admin-view/menu-new/menu-upload/menu-upload.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { AdminCommService } from '../../admin-comm.service';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-upload-edit',
+  templateUrl: './menu-upload.component.html',
+  styleUrls: ['./menu-upload.component.scss'],
+})
+export class MenuUploadComponent {
+  constructor(private ac:AdminCommService, public dialogRef: MatDialogRef<MenuUploadComponent>) {}
+  protected file: File | undefined;
+  onFileChange(event: Event) {
+    const file:File = (event.target as HTMLInputElement).files![0];
+    if (file) {
+      this.file = file
+    } else {
+      this.file = undefined
+    }
+  }
+  
+  submit() {
+    this.ac.menu.postMenu(this.file!)?.subscribe((value) => {
+      this.dialogRef.close(value)
+    })
+  }
+}
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.html
+++ b/src/app/admin-view/news-edit/new-post/edit-post.component.html
@@ -0,0 +1,11 @@
+<form [formGroup]="form" (ngSubmit)="makePost()">
+    <mat-form-field appearance="outline">
+        <mat-label>Tytuł</mat-label>
+        <input type="text" matInput required formControlName="title">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+        <mat-label>Treść</mat-label>
+        <textarea matInput required formControlName="content" cdkTextareaAutosize></textarea>
+    </mat-form-field>
+    <button mat-stroked-button>Wyślij</button>
+</form>
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.scss
+++ b/src/app/admin-view/news-edit/new-post/edit-post.component.scss
@@ -0,0 +1,10 @@
+:host {
+    padding: 8pt;
+    display: block;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.spec.ts
+++ b/src/app/admin-view/news-edit/new-post/edit-post.component.spec.ts
@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewPostComponent } from './edit-post.component';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('NewPostComponent', () => {
+  let component: NewPostComponent;
+  let fixture: ComponentFixture<NewPostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewPostComponent],
+      imports: [MatDialogModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, BrowserAnimationsModule],
+      providers: [
+        {provide: MatDialogRef, useValue: {}},
+        {provide: MAT_DIALOG_DATA, useValue: {}}
+      ]
+    });
+    fixture = TestBed.createComponent(NewPostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/news-edit/new-post/edit-post.component.ts
+++ b/src/app/admin-view/news-edit/new-post/edit-post.component.ts
@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-edit-post',
+  templateUrl: './edit-post.component.html',
+  styleUrls: ['./edit-post.component.scss']
+})
+export class NewPostComponent {
+  form: FormGroup;
+  constructor (public dialogRef: MatDialogRef<NewPostComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+    if (data == null) {
+      data = {
+        title:"",
+        content:"",
+      }
+    }
+    this.form = new FormGroup({
+      title: new FormControl(data.title),
+      content: new FormControl(data.content)
+    })
+  }
+
+  protected makePost() {
+    this.dialogRef.close({
+      title: this.form.get('title')?.value,
+      content: this.form.get('content')?.value
+    })
+  }
+}
--- a/src/app/admin-view/news-edit/news-edit.component.html
+++ b/src/app/admin-view/news-edit/news-edit.component.html
@@ -0,0 +1,25 @@
+<button mat-raised-button (click)="newPost()" color="accent">Nowy post</button>
+<mat-spinner *ngIf="loading"></mat-spinner>
+<mat-card *ngFor="let item of news">
+    <mat-card-header>
+        <mat-card-title>{{item.title}}</mat-card-title>
+        <mat-icon *ngIf="item.pinned">push_pin</mat-icon>
+        <mat-card-subtitle>{{item._id}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content [innerHTML]="item.formatted">
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-mini-fab (click)="editPost(item)"><mat-icon>edit</mat-icon></button>
+        <button mat-mini-fab (click)="pinToggle(item)"><mat-icon>push_pin</mat-icon></button>
+        <button mat-mini-fab (click)="visibleToggle(item)">
+            <div [ngSwitch]="item.visible">
+                <mat-icon *ngSwitchCase="true">visibility</mat-icon>
+                <mat-icon *ngSwitchDefault>visibility_off</mat-icon>
+            </div>
+        </button>
+        <button mat-mini-fab (click)="delete(item._id)"><mat-icon>delete_forever</mat-icon></button>
+    </mat-card-actions>
+    <mat-card-footer>
+        <p>{{item.date | date:'d-LL-yyyy HH:mm'}}</p>
+    </mat-card-footer>
+</mat-card>
--- a/src/app/admin-view/news-edit/news-edit.component.scss
+++ b/src/app/admin-view/news-edit/news-edit.component.scss
@@ -0,0 +1,34 @@
+mat-card {
+    margin: 15px;
+    padding: 1ch;
+    width: 100%;
+}
+
+mat-card-title {
+    font-size: 1.5rem;
+}
+
+mat-card-footer p {
+    font-size: 0.8rem;
+    color: #4a4a4a;
+    @media (prefers-color-scheme: dark) {
+        color: #999999
+    }
+    margin-bottom: 0;
+    text-align: end;
+}
+
+mat-card-content p {
+    white-space: pre-line;
+}
+
+button {
+    margin-right: 4pt;
+}
+
+:host {
+    padding: 8pt;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
--- a/src/app/admin-view/news-edit/news-edit.component.spec.ts
+++ b/src/app/admin-view/news-edit/news-edit.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewsEditComponent } from './news-edit.component';
+import { AdminCommService } from '../admin-comm.service';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { of } from 'rxjs';
+
+describe('NewsEditComponent', () => {
+  let component: NewsEditComponent;
+  let fixture: ComponentFixture<NewsEditComponent>;
+
+  beforeEach(() => {
+    const acMock = jasmine.createSpyObj('AdminCommService', {
+      getNews: of()
+    })
+    TestBed.configureTestingModule({
+      declarations: [NewsEditComponent],
+      providers: [
+        {provide: AdminCommService, useValue: acMock}
+      ],
+      imports: [MatDialogModule, MatSnackBarModule]
+    });
+    fixture = TestBed.createComponent(NewsEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/news-edit/news-edit.component.ts
+++ b/src/app/admin-view/news-edit/news-edit.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import { MatDialog } from '@angular/material/dialog';
+import { NewPostComponent } from './new-post/edit-post.component';
+import { catchError, throwError } from 'rxjs';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { News } from 'src/app/types/news';
+import { marked } from 'marked';
+
+@Component({
+  selector: 'app-news-edit',
+  templateUrl: './news-edit.component.html',
+  styleUrls: ['./news-edit.component.scss']
+})
+export class NewsEditComponent implements OnInit {
+  news:Array<News & {formatted: string}> = new Array<News & {formatted: string}>
+  loading = true
+
+  constructor(private ac:AdminCommService, private dialog:MatDialog, private sb:MatSnackBar) {}
+
+  ngOnInit() {
+    this.loading = true
+    this.ac.news.getNews().subscribe(data => {
+      this.loading = false
+      this.news = data.map(v => {
+        var nd: News & {formatted: string} = {
+          ...v,
+          formatted: marked.parse(v.content, {breaks: true}).toString()
+        }
+        return nd
+      })
+    })
+  }
+
+  newPost() {
+    this.dialog.open(NewPostComponent, {width: "90vw"}).afterClosed().subscribe(result=> {
+      if (result == undefined) return
+      this.ac.news.postNews(result.title, result.content).pipe(catchError((err)=>{
+        this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+        return throwError(() => new Error(err.message))
+      })).subscribe((data)=>{
+        if (data.status == 201) {
+          this.ngOnInit()
+        } else {
+          this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+        }
+      })
+    })
+  }
+
+  editPost(item: any) {
+    this.dialog.open(NewPostComponent, {data: item, width: "90vh"}).afterClosed().subscribe(result=>{
+      if (result == undefined) return
+      this.ac.news.updateNews(item._id, result.title, result.content).pipe(catchError((err)=>{
+        this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+        return throwError(()=> new Error(err.message))
+      })).subscribe((data)=> {
+        if (data.status == 200) {
+          this.ngOnInit()
+        } else {
+          this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+        }
+      })
+    })
+  }
+
+  delete(id: string) {
+    this.ac.news.deleteNews(id).subscribe(data => {
+      if (data.status == 200) {
+        this.ngOnInit()
+      }
+    })
+  }
+
+  visibleToggle(item: any) {
+    this.ac.news.toggleNews(item._id, item.visible).pipe(catchError((err)=>{
+      this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+      return throwError(()=> new Error(err.message))
+    })).subscribe((data)=> {
+      if (data.status == 200) {
+        this.ngOnInit()
+      } else {
+        this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+      }
+    })
+  }
+
+  pinToggle(item:any) {
+    console.log(item.pinned)
+    this.ac.news.togglePin(item._id, item.pinned).pipe(catchError((err)=>{
+      this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+      return throwError(()=> new Error(err.message))
+    })).subscribe((data)=> {
+      if (data.status == 200) {
+        this.ngOnInit()
+      } else {
+        this.sb.open("Wystąpił błąd. Skontaktuj się z obsługą programu.")
+      }
+    })
+  }
+}
--- a/src/app/admin-view/notifications/notifications.component.html
+++ b/src/app/admin-view/notifications/notifications.component.html
@@ -0,0 +1,44 @@
+<!-- TODO: Remake the notifications module -->
+<form [formGroup]="form" (ngSubmit)="submit()">
+    <div formGroupName="recp">
+        <mat-radio-group formControlName="type">
+            <mat-radio-button value="uname">
+                <mat-form-field>
+                    <mat-label>Nazwa użytkownika</mat-label>
+                    <input matInput type="text" formControlName="uname">
+                </mat-form-field>
+            </mat-radio-button>
+            <mat-radio-button value="room">
+                <mat-form-field>
+                    <mat-label>Pokój</mat-label>
+                    <input matInput type="number" formControlName="room">
+                </mat-form-field>
+            </mat-radio-button>
+            <mat-radio-button value="group" *ngIf="ls.capCheck(8)">
+                <mat-form-field>
+                    <mat-label>Grupa</mat-label>
+                    <mat-select formControlName="group">
+                        <mat-option *ngFor="let item of groups" [value]="item._id">{{item.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </mat-radio-button>
+            <mat-radio-button value="all">Wychowankowie</mat-radio-button>
+        </mat-radio-group>
+    </div>
+    <mat-form-field>
+        <mat-label>Tytuł</mat-label>
+        <input matInput type="text" formControlName="title">
+    </mat-form-field>
+    <br>
+    <mat-form-field>
+        <mat-label>Zawartość wiadomości</mat-label>
+        <textarea matInput cdkTextareaAutosize formControlName="body"></textarea>
+    </mat-form-field>
+    <br>
+    <button mat-fab extended type="submit">
+        <mat-icon>send</mat-icon>
+        Wyślij
+    </button>
+</form>
+
+<p *ngIf="success">Udało się wysłać {{success.sent}} z {{success.possible}} = {{success.sent/success.possible | percent}}</p>
--- a/src/app/admin-view/notifications/notifications.component.scss
+++ b/src/app/admin-view/notifications/notifications.component.scss
@@ -0,0 +1,3 @@
+mat-radio-button {
+    display: block;
+}
--- a/src/app/admin-view/notifications/notifications.component.spec.ts
+++ b/src/app/admin-view/notifications/notifications.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotificationsComponent]
+    });
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/notifications/notifications.component.ts
+++ b/src/app/admin-view/notifications/notifications.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { AdminCommService } from '../admin-comm.service';
+import { Notification } from 'src/app/types/notification';
+import { Group } from 'src/app/types/group';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss']
+})
+export class NotificationsComponent implements OnInit {
+
+  groups!: Group[]
+
+  constructor (private readonly acs: AdminCommService, readonly ls: LocalStorageService) { }
+
+  ngOnInit(): void {
+    this.acs.notif.getGroups().subscribe((v) => {
+      this.groups = v
+    })
+  }
+
+  success?: { sent: number; possible: number; };
+
+  form = new FormGroup<NotificationForm>({
+    recp: new FormGroup({
+      uname: new FormControl<string>(''),
+      room: new FormControl<number|null>(null),
+      group: new FormControl<string>(''),
+      type: new FormControl<"all" | "room" | "uname" | "group">('uname', {nonNullable: true})
+    }),
+    title: new FormControl('', {nonNullable: true}),
+    body: new FormControl('', {nonNullable: true})
+  })
+
+  submit() {
+    this.acs.notif.send(this.form.value as Notification).subscribe((data) => {
+      this.success = data
+    })
+  }
+}
+
+interface NotificationForm {
+  body: FormControl<string>;
+  title: FormControl<string>;
+  recp: FormGroup<{
+      uname: FormControl<string | null>;
+      room: FormControl<number | null>;
+      group: FormControl<string | null>;
+      type: FormControl<"all" | "room" | "uname" | "group">;
+  }>
+}
--- a/src/app/admin-view/settings/settings.component.html
+++ b/src/app/admin-view/settings/settings.component.html
@@ -0,0 +1,44 @@
+<mat-accordion>
+    <mat-expansion-panel>
+        <!-- TODO: Make more ergonomic -->
+        <mat-expansion-panel-header>
+            <mat-panel-title>Pokoje</mat-panel-title>
+            <mat-panel-description>Numery wszystkich pokoi</mat-panel-description>
+        </mat-expansion-panel-header>
+        <p>Kliknij listę aby edytować</p>
+        <app-list-editor [converter]="usettings.rooms" (edit)="saveRoom($event)"></app-list-editor>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Powody nieczystości</mat-panel-title>
+            <mat-panel-description>Za co są przyznawane oceny za czystość</mat-panel-description>
+        </mat-expansion-panel-header>
+        <p>Kliknij listę aby edytować</p>
+        <app-list-editor [list]="usettings.cleanThings" (edit)="saveCleanThings($event)"></app-list-editor>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Sale z kluczami</mat-panel-title>
+            <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <app-list-editor [list]="usettings.keyrooms" (edit)="saveKeyrooms($event)"></app-list-editor>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>Sterowanie programem</mat-panel-title>
+            <mat-panel-description><span style="color: red;">Zachowaj szczególną ostrożność przy tych ustawieniach!</span></mat-panel-description>
+        </mat-expansion-panel-header>
+        <!-- <button mat-fab extended color="warn">
+            <mat-icon>power_settings_new</mat-icon>
+            Restart
+        </button> -->
+        <button mat-fab extended (click)="reloadSettings()">
+            <mat-icon>refresh</mat-icon>
+            Przeładuj ustawienia
+        </button>
+        <!-- <button mat-fab extended color="warn">
+            <mat-icon>logout</mat-icon>
+            Wyloguj wszystkich użytkowników
+        </button> -->
+    </mat-expansion-panel>
+</mat-accordion>
--- a/src/app/admin-view/settings/settings.component.scss
+++ b/src/app/admin-view/settings/settings.component.scss
@@ -0,0 +1,4 @@
+:host {
+    margin: 15px;
+    display: block;
+}
--- a/src/app/admin-view/settings/settings.component.spec.ts
+++ b/src/app/admin-view/settings/settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/settings/settings.component.ts
+++ b/src/app/admin-view/settings/settings.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminCommService } from '../admin-comm.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.scss'
+})
+export class SettingsComponent implements OnInit {
+  usettings!: IUSettings
+  reloadTimeout: boolean = false;
+
+  constructor (private readonly acu: AdminCommService, private readonly sb: MatSnackBar) { }
+  ngOnInit(): void {
+    this.acu.settings.getAll().subscribe((r) => {
+      this.usettings = r
+    })
+  }
+
+  saveRoom(event: string[]) {
+    this.usettings.rooms = event.map(Number)
+    this.send()
+  }
+  saveCleanThings(event: string[]) {
+    this.usettings.cleanThings = event
+    this.send()
+  }
+  saveKeyrooms(event: string[]) {
+    this.usettings.keyrooms = event
+    this.send()
+  }
+
+  send() {
+    this.acu.settings.post(this.usettings).subscribe((s) => {
+      if (s.status == 200) {
+        this.sb.open("Zapisano!", undefined, {duration: 1000})
+      } else {
+        console.error(s);
+      }
+    })
+  }
+
+  reloadSettings() {
+    if (this.reloadTimeout) {
+      return
+    }
+    this.reloadTimeout = true
+    setTimeout(() => {
+      this.reloadTimeout = false
+    }, 5000);
+    this.acu.settings.reload().subscribe((s) => {
+      if (s.status == 200) {
+        this.sb.open("Przeładowano ustawienia!", undefined, {duration: 3000})
+      } else {
+        console.error(s);
+      }
+    })
+  }
+}
+
+export interface IUSettings {
+  keyrooms: string[];
+  rooms: number[];
+  cleanThings: string[];
+}
--- a/src/app/admin-view/toolbar.service.spec.ts
+++ b/src/app/admin-view/toolbar.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ToolbarService } from './toolbar.service';
+
+describe('ToolbarService', () => {
+  let service: ToolbarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToolbarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/admin-view/toolbar.service.ts
+++ b/src/app/admin-view/toolbar.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToolbarService {
+
+  public comp?: any;
+  public menu?: {title: string, check: boolean, icon?: string, fn: string}[]
+
+  constructor() { }
+
+
+}
--- a/src/app/admin.guard.spec.ts
+++ b/src/app/admin.guard.spec.ts
@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateChildFn } from '@angular/router';
+
+import { adminGuard } from './admin.guard';
+
+describe('adminGuard', () => {
+  const executeGuard: CanActivateChildFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => adminGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});
--- a/src/app/admin.guard.ts
+++ b/src/app/admin.guard.ts
@@ -0,0 +1,9 @@
+import { inject } from '@angular/core';
+import { CanActivateChildFn, Router } from '@angular/router';
+import { LocalStorageService } from './services/local-storage.service';
+
+export const adminGuard: CanActivateChildFn = (childRoute, state) => {
+  const router = inject(Router)
+  if (inject(LocalStorageService).admin == false) return router.parseUrl('/')
+  return true
+};
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NewsComponent } from './app-view/news/news.component';
+import { MenuComponent } from './app-view/menu/menu.component';
+import { AppViewComponent } from './app-view/app-view.component';
+import { LoginComponent } from './login/login.component';
+import { authGuard } from './auth.guard';
+import { PersonalComponent } from './app-view/personal/personal.component';
+import { AdminViewComponent } from './admin-view/admin-view.component';
+import { NewsEditComponent } from './admin-view/news-edit/news-edit.component';
+import { AccountMgmtComponent } from './admin-view/account-mgmt/account-mgmt.component';
+import { MenuNewComponent } from './admin-view/menu-new/menu-new.component';
+import { adminGuard } from './admin.guard';
+// import { NotificationsComponent } from './admin-view/notifications/notifications.component';
+import { GroupsComponent } from './admin-view/groups/groups.component';
+import { StartComponent } from './app-view/start/start.component';
+import { AdminKeyComponent } from './admin-view/key/key.component';
+import { GradesComponent } from './admin-view/grades/grades.component';
+import { SummaryComponent } from './admin-view/grades/summary/summary.component';
+import { SettingsComponent } from './admin-view/settings/settings.component';
+
+const routes: Routes = [
+  {path: "", redirectTo: "login", pathMatch: "full"},
+  {path: "login", component: LoginComponent},
+  {path: "app", component: AppViewComponent, title: "Internat", canActivateChild: [authGuard], children: [
+    {path: "", component: StartComponent, pathMatch: "full"},
+    {path: "news",component: NewsComponent, title: "Wiadomości"},
+    {path: "menu", component: MenuComponent, title: "Jadłospis"},
+    {path: "grades", component: PersonalComponent, title: "Konto"}
+  ]},
+  {path: "admin", component: AdminViewComponent, title: "Panel administracyjny", canActivateChild: [authGuard, adminGuard], children: [
+    {path: "news", title: "Edytowanie wiadomości", component: NewsEditComponent},
+    {path: "menu", title: "Edytowanie jadłospisu", component: MenuNewComponent},
+    {path: "accounts", title: "Użytkownicy", component: AccountMgmtComponent},
+    // {path: "notifications", title: "Powiadomienia", component: NotificationsComponent},
+    {path: "groups", title: "Grupy", component: GroupsComponent},
+    {path: "keys", title: "Klucze", component: AdminKeyComponent},
+    {path: "grades", children: [
+      {path: "", pathMatch: "full", title: "Oceny", component: GradesComponent},
+      {path: "summary", title: "Podsumowanie ocen", component: SummaryComponent}
+    ]},
+    {path: "settings", title: "Ustawienia", component: SettingsComponent}
+  ]}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/src/app/app-view/app-view.component.html
+++ b/src/app/app-view/app-view.component.html
@@ -0,0 +1,15 @@
+<mat-tab-nav-panel id="outlet" #tp>
+    <div id="scrollable">
+        <router-outlet></router-outlet>
+    </div>
+</mat-tab-nav-panel>
+<nav mat-tab-nav-bar id="bot-navigation" [tabPanel]="tp" color="primary">
+    @for (link of LINKS; track link) {
+        <a mat-tab-link [routerLink]="link.href" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
+            <div>
+                <div><mat-icon>{{link.icon}}</mat-icon></div>
+                <div>{{link.title}}</div>
+            </div>
+        </a>
+    }
+</nav>
--- a/src/app/app-view/app-view.component.scss
+++ b/src/app/app-view/app-view.component.scss
@@ -0,0 +1,26 @@
+#bot-navigation {
+    width: 100%;
+}
+
+#outlet {
+    width: 100%;
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+#scrollable {
+    overflow: auto;
+    height: 100%;
+    position: relative;
+}
+
+:host {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+a {
+    text-decoration-line: none;
+}
--- a/src/app/app-view/app-view.component.spec.ts
+++ b/src/app/app-view/app-view.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppViewComponent } from './app-view.component';
+import { AuthClient } from '../services/auth.client';
+import { SwPush } from '@angular/service-worker';
+import { UpdatesService } from '../services/updates.service';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { of } from 'rxjs';
+
+describe('AppViewComponent', () => {
+  let component: AppViewComponent;
+  let fixture: ComponentFixture<AppViewComponent>;
+  let authClient: jasmine.SpyObj<AuthClient>;
+
+  beforeEach(() => {
+    const authSpy = jasmine.createSpyObj('AuthClient', ['check'])
+    const pushSpy = jasmine.createSpyObj('SwPush', ['requestSubscription'])
+    const updatesSpy = jasmine.createSpyObj('UpdatesService', ['postNotif'])
+    TestBed.configureTestingModule({
+      declarations: [AppViewComponent],
+      providers: [{provide: AuthClient, useValue: authSpy},
+      {provide: SwPush, useValue: pushSpy},
+      {provide: UpdatesService, useValue: updatesSpy}],
+      imports: [MatTabsModule, RouterModule.forRoot([]), MatIconModule]
+    });
+    fixture = TestBed.createComponent(AppViewComponent);
+    component = fixture.componentInstance;
+    authClient = TestBed.inject(AuthClient) as jasmine.SpyObj<AuthClient>
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/app-view/app-view.component.ts
+++ b/src/app/app-view/app-view.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthClient } from '../services/auth.client';
+import { SwPush } from '@angular/service-worker';
+import { environment } from 'src/environments/environment';
+import { UpdatesService } from '../services/updates.service';
+import { Link } from '../types/link';
+import { LocalStorageService } from '../services/local-storage.service';
+import { interval } from 'rxjs';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-app-view',
+  templateUrl: './app-view.component.html',
+  styleUrls: ['./app-view.component.scss']
+})
+export class AppViewComponent implements OnInit {
+  readonly VAPID_PUK = environment.vapid.pubkey
+  private readonly _LINKS: Link[] = [
+    { title: "Jadłospis", href: "menu", icon: "restaurant_menu", enabled: this.ls.capCheck(2) },
+    { title: "Wiadomości", href: "news", icon: "newspaper", enabled: this.ls.capCheck(1) },
+    { title: "Konto", href: "grades", icon: "account_circle", enabled: true }
+  ];
+
+  public get LINKS() {
+    return this._LINKS.filter((v) => {
+      return v.enabled
+    });
+  }
+
+  constructor (private ac: AuthClient, readonly swPush: SwPush, private us: UpdatesService, private ls: LocalStorageService, private sb: MatSnackBar) {}
+  
+  subscribeToNotif() {
+    if (this.swPush.isEnabled && this.ls.capCheck(4)) {
+      this.swPush.requestSubscription({
+        serverPublicKey: this.VAPID_PUK
+      }).then(sub => {
+        this.us.postNotif(sub)
+      })
+    }
+  }
+
+  ngOnInit() {
+    this.subscribeToNotif()
+    this.ac.check()
+    this.newsCheck()
+    interval(1000 * 60 * 15).subscribe(this.newsCheck)
+  }
+
+  newsCheck() {
+    if (this.ls.newsflag) return;
+    this.us.newsCheck().subscribe((s) => {
+      if (s.hash != this.ls.newsCheck.hash) {
+        this.ls.newsflag = this.ls.newsCheck.count - s.count
+        this.ls.newsCheck = s
+        this.sb.open("Nowe wiadomości", "Zamknij", {duration: 5000, verticalPosition: 'bottom'})
+      }
+    })
+  }
+}
--- a/src/app/app-view/menu/allergens/allergens.component.html
+++ b/src/app/app-view/menu/allergens/allergens.component.html
@@ -0,0 +1,10 @@
+<h2><b>Alergeny</b></h2>
+<ol>
+    <!-- Make non-static -->
+    <li>Nabiał</li>
+    <li>Gluten</li>
+    <li>Seler</li>
+    <li>Jaja</li>
+    <li>Ryby</li>
+    <li>Sezam / Orzechy</li>
+</ol>
--- a/src/app/app-view/menu/allergens/allergens.component.scss
+++ b/src/app/app-view/menu/allergens/allergens.component.scss
@@ -0,0 +1,3 @@
+ol>li::marker {
+    font-weight: bold;
+}
--- a/src/app/app-view/menu/allergens/allergens.component.spec.ts
+++ b/src/app/app-view/menu/allergens/allergens.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllergensComponent } from './allergens.component';
+
+describe('AllergensComponent', () => {
+  let component: AllergensComponent;
+  let fixture: ComponentFixture<AllergensComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AllergensComponent]
+    });
+    fixture = TestBed.createComponent(AllergensComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/Show More
+++ b/Show More