Added booklist + Code cleaning and styling adjustments

ras/api/views.py

@@ -13,7 +13,7 @@ import json
 
 def getBooksData():
     engine = create_engine('mysql+mysqldb://' + ras.settings.DATABASES['default']['USER'] + ':' + ras.settings.DATABASES['default']['PASSWORD'] + '@' + ras.settings.DATABASES['default']['HOST'] + ':3306/' + ras.settings.DATABASES['default']['NAME'])
-    df = pd.read_sql('SELECT * FROM api_books', engine, parse_dates={'readed': {'format': '%m-%Y'}})
+    df = pd.read_sql('SELECT * FROM api_books ORDER BY readed', engine, parse_dates={'readed': {'format': '%m-%Y'}})
 
     return df
 

ras/frontend/package.json

@@ -27,10 +27,13 @@
     "@material-ui/icons": "^4.11.3",
     "@mui/material": "^5.10.3",
     "chartjs-plugin-style": "^0.5.0",
-    "datatables.net": "^1.12.1",
+    "css-loader": "^6.7.3",
-    "datatables.net-dt": "^1.12.1",
+    "datatables.net": "^1.13.1",
+    "datatables.net-dt": "^1.13.1",
     "jquery": "^3.6.1",
+    "moment": "^2.29.4",
     "react-loader-spinner": "^5.3.4",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.6.0",
+    "style-loader": "^3.3.1"
   }
 }

ras/frontend/src/App.js

@@ -1,114 +1,35 @@
-import React, { Component } from "react";
+import React, { Component, lazy, Suspense } from "react";
-import Challenge from "./components/Challenge";
+import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
-import BookStats from "./components/Stats";
 import { ColorRing } from 'react-loader-spinner'
-import Countries from "./components/Countries";
-import Pages from "./components/Pages";
-import Genres from "./components/Genres";
-import Books from "./components/Books";
-import { getReadingYears } from "./components/Data.js";
 
-export default class App extends Component {
+const Dashboard = lazy(() => import("./views/dashboard"));
-    constructor(props) {
+const Booklist = lazy(() => import("./views/booklist"));
-        super(props);
-        this.state = {
-            year: new Date().getFullYear(),
-            readingYears: [],
-        }
-    }
 
-    changeYear(event) {
+function App() {
-        this.setState({
+    return (
-            year: event.target.value
+        <Router>
-        })
+            <Suspense fallback={
-    }
+                <div className="loading-screen-overlay" id="loading-overlay">
-
+                    <div className="loading-screen">
-    componentDidMount() {
+                        <ColorRing
-
+                            visible={true}
-        setTimeout(() =>{
+                            height="80"
-            document.getElementById("loading-overlay").style.display = "none";
+                            width="80"
-        }, 1000);
+                            ariaLabel="blocks-loading"
-
+                            wrapperStyle={{}}
-        getReadingYears().then(data => {
+                            wrapperClass="blocks-wrapper"
-            this.setState({
+                            colors={['#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e']}
-                readingYears: data
+                        />
-            })
+                        <span>Data wordt geladen...</span>
-        })
-
-    }
-
-    render() {
-        var url = window.location.href.split("/");
-
-        return (
-            <React.Fragment>
-                <div className="sidebar">
-                    <div className={`menu-item ${url && url[3] == "" ? 'selected' : ''}`}>
-                        <i className="fa fa-chart-bar"></i>
                     </div>
-                    <div className={`menu-item ${url && url[3] == "books" ? 'selected' : ''}`}>
+                </div>}>
-                        <i className="fa fa-book"></i>
+                <Routes>
-                    </div>
+                    <Route exact path="/" element={<Dashboard />} />
-
+                    <Route exact path="/booklist" element={<Booklist />} />
-                </div>
+                </Routes>
-                <div className="content">
+            </Suspense>
-
+        </Router>
-                    <div className="loading-screen-overlay" id="loading-overlay">
+    )
-                        <div className="loading-screen">
-                            <ColorRing
-                                visible={true}
-                                height="80"
-                                width="80"
-                                ariaLabel="blocks-loading"
-                                wrapperStyle={{}}
-                                wrapperClass="blocks-wrapper"
-                                colors={['#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e']}
-                            />
-                            <span>Data wordt geladen...</span>
-                        </div>
-                    </div>
-
-                    <h1>Dashboard</h1>
-                    <h2>Leesanalyse van Jordy van Zeeland</h2>
-
-                    <div className="books-stats">
-                        <div className="container-fluid">
-                            <div className="row">
-                                <div className="col-md-2">
-                                    <div className="stat-block">
-                                        <i className="fa fa-calendar"></i>
-                                        <span className="stats-number">
-                                            <select className="yearselector" value={this.state.year} onChange={(event) => this.changeYear(event)}>
-                                                {this.state.readingYears.map((year, i) => {
-                                                    return (<option key={i} value={year}>{year}</option>)
-                                                })}
-                                            </select>
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <BookStats year={this.state.year} />
-                            </div>
-                        </div>
-                    </div>
-
-                    <Challenge year={this.state.year} />
-
-                    <div className="container-fluid">
-                        <div className="row">
-                            <div className="col-md-9">
-                                <Books year={this.state.year} />
-                                <Pages year={this.state.year} />
-                            </div>
-
-                            <div className="col-md-3">
-                                <Countries year={this.state.year} />
-                                <Genres year={this.state.year} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </React.Fragment>
-        )
-    }
 }
+
+export default App;

ras/frontend/src/Functions.js

@@ -0,0 +1,24 @@
+const filterDataTable = (column, value, exact) => {
+    if (value !== 0 && exact === true) {
+        $('#DataTable').DataTable().column(column).search("(^" + value + "$)", true, false).draw();
+    } else {
+        $('#DataTable').DataTable().column(column).search(value).draw();
+    }
+}
+
+const fillDataTableFilters = (filter, value, text) => {
+    console.log(value, text);
+    if (value && !filter.find("option:contains('" + text + "')").length) {
+        var option = new Option(value, value);
+        option.innerHTML = text;
+        filter[0].appendChild(option);
+    }
+}
+
+const getFlagEmoji = (countryCode) => {
+    const codePoints = countryCode
+      .toUpperCase()
+      .split('')
+      .map(char =>  127397 + char.charCodeAt());
+    return String.fromCodePoint(...codePoints);
+  }

ras/frontend/src/components/Countries.js

@@ -32,7 +32,7 @@ export default class Countries extends Component {
             <React.Fragment>
                 <div className="books-per-country">
                     <span className="block_name">Landen</span>
-                    <table id="DataTable" className="showHead table responsive nowrap" width="100%">
+                    <table id="DataTable" className="table responsive nowrap" width="100%">
                         <thead>
                             <tr>
                                 <th>#</th>

ras/frontend/src/components/Data.js

@@ -1,3 +1,13 @@
+export const getAllBooks = () => {
+    return fetch('/api/books', {
+        "method": "GET",
+    })
+        .then(response => response.json())
+        .then(data => {
+            return data;
+        })
+}
+
 export const getStats = (year) => {
     return fetch('/api/books/stats', {
         "method": "GET",

ras/frontend/src/components/DataTables.css

@@ -0,0 +1,227 @@
+.dataTable-top td{
+    vertical-align: top;
+}
+
+.dataTable-top td{
+    padding-top:15px !important;
+}
+
+.DataTable_Container {
+    margin: 0 !important;
+    margin-top:30px !important;
+}
+
+#DataTable{
+    margin-bottom:0;
+    box-shadow: 0 2px 0 1px rgb(0 0 0/3%);
+}
+
+#DataTable a {
+    color: #000;
+    text-decoration: none;
+}
+
+#DataTable i {
+    color: #ffbe0e;
+    margin-right:10px;
+}
+
+#DataTable thead th{
+    padding: 20px 20px;
+    border-bottom: 1px solid #efefef;
+    font-weight: 600;
+    font-size: 15px;
+    color:#000000;
+}
+
+#DataTable tr{
+    background:#ffffff;
+}
+
+#DataTable tr:first-child td{
+    border-top:none;
+}
+
+#DataTable td{
+    padding:14px;
+}
+
+#DataTable{
+    margin-bottom:0;
+}
+
+#DataTable .openAlarm .pictogram {
+    /* display: inline-block;
+    padding: 0 0 0 0;
+    margin: 10px 10px 10px 10px;
+    background: rgb(255,0,0); */
+    display: inline-block;
+    margin: 10px 10px 10px 10px;
+    background: rgb(255,0,0);
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+    border-radius: 100%;
+    padding: 5px;
+}
+
+#DataTable tbody td:first-child{
+    padding: 0rem;
+}
+
+
+#DataTable td{
+    padding:10px;
+    color: #000000;
+    font-size: 15px;
+    height: 45px;
+    font-weight: 400;
+    vertical-align: middle;
+    padding-left: 20px !important;
+    border-top: 1px solid #efefef;
+    border-bottom: none;
+}
+
+#DataTable .openAlarm td{
+    padding:10px;
+    color: #000000;
+    font-size: 14px;
+    height: 45px;
+    font-weight: 400;
+    vertical-align: middle;
+    border-top: 1px solid #efefef;
+}
+
+#DataTable .openAlarm:first-child td{
+    border-top:none;
+}
+
+.DataTable_Container {
+    margin: 0px 2.5rem 0px 2.5rem;
+}
+
+.DataTable_Container thead{
+    display:none;
+}
+
+
+.DataTable_Container table{
+    margin-bottom:0;
+}
+
+.DataTable_Container h2 {
+    float: left;
+    margin-top: 15px;
+    font-size: 14px;
+    font-weight: 600;
+    padding-left: 20px;
+    width: 100%;
+    border-bottom: solid 1px #e7eaed;
+    padding-bottom: 15px;
+    margin-bottom: 0;
+}
+
+.DataTable_Container .historyAlarm .pictogram {
+    /* display: inline-block;
+    padding: 0 0 0 0;
+    margin: 10px 10px 10px 10px;
+    background: rgb(255,0,0); */
+    display: inline-block;
+    margin: 10px 10px 10px 10px;
+    background: rgb(255,0,0);
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+    border-radius: 100%;
+    padding: 5px;
+}
+
+.DataTable_Container .table tbody td:first-child{
+    padding: 0rem;
+}
+
+.DataTable_Container .historyAlarm td{
+    padding:10px;
+    color: #000000;
+    font-size: 14px;
+    height: 45px;
+    font-weight: 100;
+    vertical-align: middle;
+    border-top: 1px solid #efefef;
+}
+
+.DataTable_Container .historyAlarm:first-child td{
+    border-top:none;
+}
+
+.DataTable_Container .dataTables_length{
+    padding: 20px 0;
+}
+
+.DataTable_Container .dataTables_length select{
+    border: 1px solid #ced4da !important;
+    padding: 5px 5px !important;
+    margin-right: 5px !important;
+    background:#ffffff;
+}
+
+.DataTable_Container .dataTables_filter{
+    padding: 20px 0;
+}
+
+.DataTable_Container .dataTables_filter input{
+    border: 1px solid #ced4da !important;
+    padding: 5px 5px !important;
+    margin-right: 5px !important;
+    background:#ffffff;
+}
+
+.DataTable_Container table.dataTable.no-footer {
+    border-bottom: none;
+}
+
+.DataTable_Container .dataTables_info{
+    padding: 20px 0;
+    font-size: 14px;
+}
+
+.DataTable_Container .dataTables_paginate{
+    padding: 20px 0;
+}
+
+.DataTable_Container .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+    background: none !important;
+    background-color: #8066ee !important;
+    border-color: #8066ee !important;
+    color: #fff !important;
+}
+
+.DataTable_Container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+    background: none !important;
+    background-color: #eaebec !important;
+    color: #000 !important;
+}
+
+.dataTables_wrapper .dataTables_paginate{
+    float:right;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 1.5em;
+    padding: 0.5em 1em;
+    margin-left: 2px;
+    text-align: center;
+    text-decoration: none !important;
+    cursor: pointer;
+    color: #333 !important;
+    border: 1px solid transparent;
+    border-radius: 2px;
+    font-size: 13px;
+}
+
+.showHead thead{
+    display: table-header-group;
+}
+
+.badge-info{
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+    padding: 5px 15px;
+}

ras/frontend/src/components/Filters.js

@@ -0,0 +1,52 @@
+import React from "react";
+import '../components/DataTables.css';
+import * as moment from 'moment';
+const $ = require('jquery');
+$.DataTable = require('datatables.net');
+moment.locale('nl');
+
+function Filters() {
+
+    const filterDataTable = (column, value, exact) => {
+        if (value !== 0 && exact === true) {
+            $('#DataTable').DataTable().column(column).search("(^" + value + "$)", true, false).draw();
+        } else {
+            $('#DataTable').DataTable().column(column).search(value).draw();
+        }
+    }
+
+    $('.author').on('change', function () {
+        filterDataTable(1, this.value, false);
+    });
+
+    $('.genre').on('change', function () {
+        filterDataTable(2, this.value, false);
+    });
+
+    $('.country').on('change', function () {
+        filterDataTable(3, this.value, false);
+    });
+
+    return (
+        <React.Fragment>
+            <div className='search-bar'>
+                <input type="text" onChange={(e) => filterDataTable(0, e.target.value, false)} name="search" id="search" placeholder='Zoeken...' />
+            </div>
+
+            <div className="filters">
+                <select className='author'>
+                    <option value="">Filter op Schrijver</option>
+                </select>
+                <select className='genre'>
+                    <option value="">Filter op Genre</option>
+                </select>
+                <select className='country'>
+                    <option value="">Filter op Land</option>
+                </select>
+            </div>
+        </React.Fragment>
+    )
+
+}
+
+export default Filters;

ras/frontend/src/components/Sidebar.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Sidebar(){
+    return (
+        <React.Fragment>
+            <div className='sidebar'>
+                <ul>
+                    <li><NavLink to="/"><i className="fa fa-chart-bar"></i> Dashboard</NavLink></li>
+                    <li><NavLink to="/booklist"><i className="fas fa-book"></i> Boekenlijst</NavLink></li>
+                </ul>
+            </div>
+        </React.Fragment>
+    )
+
+}
+
+export default Sidebar;

ras/frontend/src/index.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('app'));
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.Fragment>
+    <App />
+  </React.Fragment>
+);

ras/frontend/src/views/booklist.js

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import '../components/DataTables.css';
+import * as moment from 'moment';
+import Sidebar from "../components/Sidebar";
+import Filters from "../components/Filters";
+const $ = require('jquery');
+$.DataTable = require('datatables.net');
+moment.locale('nl');
+
+function Booklist(){
+    var [books, setBooks] = useState([]);
+
+    const fillDataTableFilters = (filter, value, text) => {
+        console.log(value, text);
+        if (value && !filter.find("option:contains('" + text + "')").length) {
+            var option = new Option(value, value);
+            option.innerHTML = text;
+            filter[0].appendChild(option);
+        }
+    }
+
+    const getFlagEmoji = (countryCode) => {
+        const codePoints = countryCode
+          .toUpperCase()
+          .split('')
+          .map(char =>  127397 + char.charCodeAt());
+        return String.fromCodePoint(...codePoints);
+      }
+
+    useEffect(() => {
+        document.title = "Boekenlijst - Reading Analytics System";
+
+        import("../components/Data.js").then(module => {
+            return module.getAllBooks().then(data => {
+                setBooks(data);
+    
+                setTimeout(() => {
+                    $('#DataTable').DataTable({
+                        language: {
+                            url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json'
+                        },
+                        dom: 'rt<"bottom"pl><"clear">',
+                        order: []
+                    });
+                }, 1000)
+            });
+        });
+    }, [])
+
+    return (
+        <React.Fragment>
+            <Sidebar />
+            <div className="content">
+                <h1>Boekenlijst</h1>
+
+                <Filters />
+
+                <div className="DataTable_Container">
+                    <table id="DataTable" className="showHead table responsive nowrap" width="100%">
+                        <thead>
+                            <tr>
+                                <th>Boek</th>
+                                <th>Schrijver</th>
+                                <th>Genre</th>
+                                <th>Land</th>
+                                <th>Aantal pagina's</th>
+                                <th>Gelezen op</th>
+                                <th>Beoordeling</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {books.map((book, i) => {
+                                var code = book.country_code.toLowerCase();
+
+                                var flag = getFlagEmoji(book.country_code);
+                                var optionValue= book.country
+                                var optionText = flag + ' ' + book.country;
+
+                                fillDataTableFilters($('.genre'), book.genre, book.genre);
+                                fillDataTableFilters($('.country'), optionValue, optionText);
+                                fillDataTableFilters($('.author'), book.author, book.author);
+
+                                return (
+                                    <tr key={book.id}>
+                                        <td>{book.name}</td>
+                                        <td>{book.author}</td>
+                                        <td>{book.genre}</td>
+                                        <td><img src={`https://flagcdn.com/20x15/${code}.png`} /> {book.country}</td>
+                                        <td>{book.pages}</td>
+                                        <td>{moment(book.readed).format('MMMM YYYY')}</td>
+                                        <td><i class='fas fa-star'></i>{book.rating}</td>
+                                    </tr>
+                                )
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default Booklist;

ras/frontend/src/views/dashboard.js

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import Challenge from "../components/Challenge";
+import BookStats from "../components/Stats";
+import Countries from "../components/Countries";
+import Pages from "../components/Pages";
+import Genres from "../components/Genres";
+import Books from "../components/Books";
+import { getReadingYears } from "../components/Data.js";
+import Sidebar from "../components/Sidebar";
+
+export default class Dashboard extends Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = {
+            year: new Date().getFullYear(),
+            readingYears: [],
+        }
+    }
+
+    changeYear(event) {
+        this.setState({
+            year: event.target.value
+        })
+    }
+
+    componentDidMount() {
+
+        setTimeout(() =>{
+            document.getElementById("loading-overlay").style.display = "none";
+        }, 1000);
+
+        getReadingYears().then(data => {
+            this.setState({
+                readingYears: data
+            })
+        })
+
+    }
+
+    render() {
+        var url = window.location.href.split("/");
+
+        return (
+            <React.Fragment>
+                <Sidebar />
+                <div className="content">
+
+                    <h1>Dashboard</h1>
+
+                    <div className="books-stats">
+                        <div className="container-fluid">
+                            <div className="row">
+                                <div className="col-md-2">
+                                    <div className="stat-block">
+                                        <i className="fa fa-calendar"></i>
+                                        <span className="stats-number">
+                                            <select className="yearselector" value={this.state.year} onChange={(event) => this.changeYear(event)}>
+                                                {this.state.readingYears.map((year, i) => {
+                                                    return (<option key={i} value={year}>{year}</option>)
+                                                })}
+                                            </select>
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <BookStats year={this.state.year} />
+                            </div>
+                        </div>
+                    </div>
+
+                    <Challenge year={this.state.year} />
+
+                    <div className="container-fluid">
+                        <div className="row">
+                            <div className="col-md-9">
+                                <Books year={this.state.year} />
+                                <Pages year={this.state.year} />
+                            </div>
+
+                            <div className="col-md-3">
+                                <Countries year={this.state.year} />
+                                <Genres year={this.state.year} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}

ras/frontend/static/css/style.css

@@ -6,10 +6,17 @@ html, body{
   }
 
   h1{
-    font-size: 30px;
+    /* font-size: 30px;
     font-weight: 500;
     padding: 0 10px 0px 10px;
-    margin-bottom: 5px;
+    margin-bottom: 5px; */
+    border-bottom: 1px solid #ddd;
+    display: inline-block;
+    font-size: 25px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    padding: 0 0 10px;
+    width: 100%;
   }
 
   h2{
@@ -23,7 +30,7 @@ html, body{
 
 
   .content{
-    padding: 50px 50px 50px 110px;
+    padding: 50px 50px 50px 240px;
   }
 
   .filter{
@@ -77,10 +84,9 @@ html, body{
 
   .sidebar{
     background: #363a53;
-    width: 70px;
+    width: 200px;
     height: 100vh;
     position: fixed;
-    padding-top: 10px;
   }
 
   .sidebar .menu-item{
@@ -101,6 +107,51 @@ html, body{
     color:#ffffff;
   }
 
+  .sidebar ul {
+    padding: 0;
+  }
+  
+  .sidebar ul li {
+    list-style-type: none;
+    font-size: 14px;
+    font-weight: 400;
+  }
+  
+  .sidebar ul li a {
+    color: #a9b7d0;
+    text-decoration: none;
+    padding: 15px 0;
+    padding-left: 15px;
+    padding-right: 15px;
+    display:block;
+    width:100%;
+  }
+  
+  .sidebar ul li:has(> a.active) {
+    background: #333f54 !important;
+    border-left: solid 3px #8066ee;
+  }
+  
+  .sidebar ul li a.active {
+    color: #ffffff;
+    background: rgba(0,0,0,0.2) !important;
+    border-left: solid 3px #8066ee;
+  }
+  
+  .sidebar ul li a.active i {
+    color: #8066ee;
+  }
+  
+  .sidebar i {
+    color: #a9b7d0;
+    font-size: 13px;
+    width: 10px;
+    display: inline-block;
+    text-align: center;
+    line-height: 1;
+    margin-right: 1.125rem;
+  }
+
   .books-stats{
     margin:20px 0;
   }
@@ -198,10 +249,16 @@ html, body{
     margin-right:5px;
   }
 
-  #DataTable thead{
+  .showHead thead{
-    display:none !important;
+    display: table-header-group !important;
   }
 
+  #DataTable thead{
+    display:none;
+  }
+
+  
+
   span.block_name{
     color: #101010;
     font-weight: 600;
@@ -260,3 +317,26 @@ html, body{
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }
+
+  .search-bar input {
+    border: 1px solid #ced4da !important;
+    padding: 7px 15px !important;
+    margin-right: 5px !important;
+    background: #ffffff;
+    border-radius: 7px;
+    font-size: 13px;
+    width: 400px;
+  }
+
+  .search-bar, .filters{
+    display:inline-block;
+  }
+
+  .filters select{
+    border: 1px solid #ced4da !important;
+    padding: 7px 15px !important;
+    margin-right: 5px !important;
+    background: #ffffff;
+    border-radius: 7px;
+    font-size: 15px;
+  }

ras/frontend/static/js/main.js.LICENSE.txt

@@ -6,42 +6,10 @@
   !*** ./src/index.js ***!
   \**********************/
 
-/*!********************************!*\
-  !*** ./src/components/Data.js ***!
-  \********************************/
-
-/*!*********************************!*\
-  !*** ./src/components/Books.js ***!
-  \*********************************/
-
-/*!*********************************!*\
-  !*** ./src/components/Pages.js ***!
-  \*********************************/
-
-/*!*********************************!*\
-  !*** ./src/components/Stats.js ***!
-  \*********************************/
-
-/*!**********************************!*\
-  !*** ./src/components/Charts.js ***!
-  \**********************************/
-
-/*!**********************************!*\
-  !*** ./src/components/Genres.js ***!
-  \**********************************/
-
 /*!*************************************!*\
   !*** ./node_modules/react/index.js ***!
   \*************************************/
 
-/*!*************************************!*\
-  !*** ./src/components/Challenge.js ***!
-  \*************************************/
-
-/*!*************************************!*\
-  !*** ./src/components/Countries.js ***!
-  \*************************************/
-
 /*!****************************************!*\
   !*** ./node_modules/react-is/index.js ***!
   \****************************************/
@@ -54,10 +22,18 @@
   !*** ./node_modules/scheduler/index.js ***!
   \*****************************************/
 
+/*!******************************************!*\
+  !*** ./node_modules/react-dom/client.js ***!
+  \******************************************/
+
 /*!********************************************!*\
   !*** ./node_modules/shallowequal/index.js ***!
   \********************************************/
 
+/*!*************************************************!*\
+  !*** ./node_modules/react-router/dist/index.js ***!
+  \*************************************************/
+
 /*!***************************************************!*\
   !*** ./node_modules/styled-tools/dist/es/prop.js ***!
   \***************************************************/
@@ -70,6 +46,10 @@
   !*** ./node_modules/styled-tools/dist/es/theme.js ***!
   \****************************************************/
 
+/*!*****************************************************!*\
+  !*** ./node_modules/react-router-dom/dist/index.js ***!
+  \*****************************************************/
+
 /*!*****************************************************!*\
   !*** ./node_modules/react/cjs/react.development.js ***!
   \*****************************************************/
@@ -82,6 +62,10 @@
   !*** ./node_modules/styled-tools/dist/es/palette.js ***!
   \******************************************************/
 
+/*!*******************************************************!*\
+  !*** ./node_modules/@remix-run/router/dist/router.js ***!
+  \*******************************************************/
+
 /*!*******************************************************!*\
   !*** ./node_modules/styled-tools/dist/es/withProp.js ***!
   \*******************************************************/

ras/frontend/static/js/src_Functions_js.js

@@ -0,0 +1,2 @@
+/*! For license information please see src_Functions_js.js.LICENSE.txt */
+(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_Functions_js"],{"./src/Functions.js":()=>{eval("const filterDataTable = (column, value, exact) => {\n  if (value !== 0 && exact === true) {\n    $('#DataTable').DataTable().column(column).search(\"(^\" + value + \"$)\", true, false).draw();\n  } else {\n    $('#DataTable').DataTable().column(column).search(value).draw();\n  }\n};\n\nconst fillDataTableFilters = (filter, value, text) => {\n  console.log(value, text);\n\n  if (value && !filter.find(\"option:contains('\" + text + \"')\").length) {\n    var option = new Option(value, value);\n    option.innerHTML = text;\n    filter[0].appendChild(option);\n  }\n};\n\nconst getFlagEmoji = countryCode => {\n  const codePoints = countryCode.toUpperCase().split('').map(char => 127397 + char.charCodeAt());\n  return String.fromCodePoint(...codePoints);\n};\n\n//# sourceURL=webpack://frontend/./src/Functions.js?")}}]);

ras/frontend/static/js/src_Functions_js.js.LICENSE.txt

@@ -0,0 +1,3 @@
+/*!**************************!*\
+  !*** ./src/Functions.js ***!
+  \**************************/

ras/frontend/static/js/src_components_Books_js-src_components_Challenge_js-src_components_Countries_js-src_component-7bc540.js.LICENSE.txt

@@ -0,0 +1,31 @@
+/*!********************************!*\
+  !*** ./src/components/Data.js ***!
+  \********************************/
+
+/*!*********************************!*\
+  !*** ./src/components/Books.js ***!
+  \*********************************/
+
+/*!*********************************!*\
+  !*** ./src/components/Pages.js ***!
+  \*********************************/
+
+/*!*********************************!*\
+  !*** ./src/components/Stats.js ***!
+  \*********************************/
+
+/*!**********************************!*\
+  !*** ./src/components/Charts.js ***!
+  \**********************************/
+
+/*!**********************************!*\
+  !*** ./src/components/Genres.js ***!
+  \**********************************/
+
+/*!*************************************!*\
+  !*** ./src/components/Challenge.js ***!
+  \*************************************/
+
+/*!*************************************!*\
+  !*** ./src/components/Countries.js ***!
+  \*************************************/

ras/frontend/static/js/src_components_Data_js.js

@@ -0,0 +1,2 @@
+/*! For license information please see src_components_Data_js.js.LICENSE.txt */
+"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_components_Data_js"],{"./src/components/Data.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "getAllBooks": () => (/* binding */ getAllBooks),\n/* harmony export */   "getBooksPerYearPerGenres": () => (/* binding */ getBooksPerYearPerGenres),\n/* harmony export */   "getChallenge": () => (/* binding */ getChallenge),\n/* harmony export */   "getCountries": () => (/* binding */ getCountries),\n/* harmony export */   "getGenresCount": () => (/* binding */ getGenresCount),\n/* harmony export */   "getReadingYears": () => (/* binding */ getReadingYears),\n/* harmony export */   "getShortestLongestBook": () => (/* binding */ getShortestLongestBook),\n/* harmony export */   "getStats": () => (/* binding */ getStats)\n/* harmony export */ });\nconst getAllBooks = () => {\n  return fetch(\'/api/books\', {\n    "method": "GET"\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getStats = year => {\n  return fetch(\'/api/books/stats\', {\n    "method": "GET",\n    "headers": {\n      "year": year\n    }\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getChallenge = year => {\n  return fetch(\'/api/books/challenge\', {\n    "method": "GET",\n    "headers": {\n      "year": year\n    }\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getReadingYears = () => {\n  return fetch(\'/api/books/years\', {\n    "method": "GET"\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getCountries = year => {\n  return fetch(\'/api/books/countries\', {\n    "method": "GET",\n    "headers": {\n      "year": year\n    }\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getShortestLongestBook = year => {\n  return fetch(\'/api/books/pages/stats\', {\n    "method": "GET",\n    "headers": {\n      "year": year\n    }\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getBooksPerYearPerGenres = year => {\n  return fetch(\'/api/books/genres\', {\n    "method": "GET",\n    "headers": {\n      "year": year\n    }\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\nconst getGenresCount = year => {\n  return fetch(\'/api/books/genres/count\', {\n    "method": "GET",\n    "headers": {\n      "year": year\n    }\n  }).then(response => response.json()).then(data => {\n    return data;\n  });\n};\n\n//# sourceURL=webpack://frontend/./src/components/Data.js?')}}]);

ras/frontend/static/js/src_components_Data_js.js.LICENSE.txt

@@ -0,0 +1,3 @@
+/*!********************************!*\
+  !*** ./src/components/Data.js ***!
+  \********************************/

ras/frontend/static/js/src_views_booklist_js-node_modules_moment_locale_sync_recursive_.js.LICENSE.txt

@@ -0,0 +1,23 @@
+/*!*******************************!*\
+  !*** ./src/views/booklist.js ***!
+  \*******************************/
+
+/*!***********************************!*\
+  !*** ./src/components/Filters.js ***!
+  \***********************************/
+
+/*!***********************************!*\
+  !*** ./src/components/Sidebar.js ***!
+  \***********************************/
+
+/*!***************************************!*\
+  !*** ./src/components/DataTables.css ***!
+  \***************************************/
+
+/*!***************************************************!*\
+  !*** ./node_modules/moment/locale/ sync ^\.\/.*$ ***!
+  \***************************************************/
+
+/*!*****************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./src/components/DataTables.css ***!
+  \*****************************************************************************/

ras/frontend/static/js/src_views_booklist_js.js

@@ -0,0 +1,2 @@
+/*! For license information please see src_views_booklist_js.js.LICENSE.txt */
+(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_views_booklist_js"],{"./src/views/booklist.js":()=>{eval('throw new Error("Module build failed (from ./node_modules/babel-loader/lib/index.js):\\nSyntaxError: C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\src\\\\views\\\\booklist.js: Unexpected token (78:84)\\n\\n\\u001b[0m \\u001b[90m 76 |\\u001b[39m                                     }\\u001b[0m\\n\\u001b[0m \\u001b[90m 77 |\\u001b[39m\\u001b[0m\\n\\u001b[0m\\u001b[31m\\u001b[1m>\\u001b[22m\\u001b[39m\\u001b[90m 78 |\\u001b[39m                                     \\u001b[36mif\\u001b[39m(document\\u001b[33m.\\u001b[39mgetElementById(\\u001b[32m\\"rating-\\"\\u001b[39m \\u001b[33m+\\u001b[39m book\\u001b[33m.\\u001b[39mid))\\u001b[33m.\\u001b[39mlength \\u001b[33m>\\u001b[39m \\u001b[35m0\\u001b[39m){\\u001b[0m\\n\\u001b[0m \\u001b[90m    |\\u001b[39m                                                                                     \\u001b[31m\\u001b[1m^\\u001b[22m\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 79 |\\u001b[39m                                         document\\u001b[33m.\\u001b[39mgetElementById(\\u001b[32m\\"rating-\\"\\u001b[39m \\u001b[33m+\\u001b[39m book\\u001b[33m.\\u001b[39mid)\\u001b[33m.\\u001b[39minnerHTML \\u001b[33m=\\u001b[39m rating\\u001b[33m;\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 80 |\\u001b[39m                                     }\\u001b[0m\\n\\u001b[0m \\u001b[90m 81 |\\u001b[39m                                     \\u001b[0m\\n    at instantiate (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:72:32)\\n    at constructor (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:366:12)\\n    at JSXParserMixin.raise (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:3453:19)\\n    at JSXParserMixin.unexpected (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:3491:16)\\n    at JSXParserMixin.parseExprAtom (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:13260:22)\\n    at JSXParserMixin.parseExprAtom (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:8174:20)\\n    at JSXParserMixin.parseExprSubscripts (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:12785:23)\\n    at JSXParserMixin.parseUpdate (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:12764:21)\\n    at JSXParserMixin.parseMaybeUnary (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:12734:23)\\n    at JSXParserMixin.parseMaybeUnaryOrPrivate (C:\\\\xampp\\\\htdocs\\\\reading-analytics-system\\\\ras\\\\frontend\\\\node_modules\\\\@babel\\\\parser\\\\lib\\\\index.js:12525:61)");\n\n//# sourceURL=webpack://frontend/./src/views/booklist.js?')}}]);

ras/frontend/static/js/src_views_booklist_js.js.LICENSE.txt

@@ -0,0 +1,3 @@
+/*!*******************************!*\
+  !*** ./src/views/booklist.js ***!
+  \*******************************/

ras/frontend/static/js/src_views_dashboard_js.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/*!********************************!*\
+  !*** ./src/components/Data.js ***!
+  \********************************/
+
+/*!********************************!*\
+  !*** ./src/views/dashboard.js ***!
+  \********************************/
+
+/*!*********************************!*\
+  !*** ./src/components/Books.js ***!
+  \*********************************/
+
+/*!*********************************!*\
+  !*** ./src/components/Pages.js ***!
+  \*********************************/
+
+/*!*********************************!*\
+  !*** ./src/components/Stats.js ***!
+  \*********************************/
+
+/*!**********************************!*\
+  !*** ./src/components/Charts.js ***!
+  \**********************************/
+
+/*!**********************************!*\
+  !*** ./src/components/Genres.js ***!
+  \**********************************/
+
+/*!***********************************!*\
+  !*** ./src/components/Sidebar.js ***!
+  \***********************************/
+
+/*!*************************************!*\
+  !*** ./src/components/Challenge.js ***!
+  \*************************************/
+
+/*!*************************************!*\
+  !*** ./src/components/Countries.js ***!
+  \*************************************/

ras/frontend/static/js/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_noSo-163367.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/*!********************************************!*\
+  !*** ./node_modules/jquery/dist/jquery.js ***!
+  \********************************************/
+
+/*!*****************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
+  \*****************************************************/
+
+/*!**************************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
+  \**************************************************************/
+
+/*!**************************************************************!*\
+  !*** ./node_modules/datatables.net/js/jquery.dataTables.mjs ***!
+  \**************************************************************/
+
+/*!***************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
+  \***************************************************************/
+
+/*!********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
+  \********************************************************************/
+
+/*!*********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
+  \*********************************************************************/
+
+/*!**********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
+  \**********************************************************************/
+
+/*!****************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
+  \****************************************************************************/
+
+/*!**********************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
+  \**********************************************************************************/

ras/frontend/static/js/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_noSo-3fe857.js.LICENSE.txt

@@ -0,0 +1,583 @@
+/*!***************************************!*\
+  !*** ./node_modules/moment/moment.js ***!
+  \***************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/af.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ar.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/az.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/be.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bg.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bm.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/br.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/bs.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ca.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/cs.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/cv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/cy.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/da.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/de.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/dv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/el.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/eo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/es.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/et.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/eu.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fa.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/fy.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ga.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/gd.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/gl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/gu.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/he.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/hi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/hr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/hu.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/id.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/is.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/it.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ja.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/jv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ka.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/kk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/km.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/kn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ko.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ku.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ky.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lb.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lo.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lt.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/lv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/me.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ml.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ms.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/mt.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/my.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/nb.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ne.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/nl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/nn.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/pl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/pt.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ro.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ru.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sd.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/se.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/si.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sl.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sq.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ss.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sv.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/sw.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ta.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/te.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/tg.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/th.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/tk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/tr.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/uk.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/ur.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/uz.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/vi.js ***!
+  \******************************************/
+
+/*!******************************************!*\
+  !*** ./node_modules/moment/locale/yo.js ***!
+  \******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/fil.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tet.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tlh.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tzl.js ***!
+  \*******************************************/
+
+/*!*******************************************!*\
+  !*** ./node_modules/moment/locale/tzm.js ***!
+  \*******************************************/
+
+/*!********************************************!*\
+  !*** ./node_modules/jquery/dist/jquery.js ***!
+  \********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-dz.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-kw.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-ly.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-ma.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-sa.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ar-tn.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/bn-bd.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/de-at.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/de-ch.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-au.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-ca.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-gb.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-ie.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-il.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-in.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-nz.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/en-sg.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/es-do.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/es-mx.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/es-us.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/fr-ca.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/fr-ch.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/hy-am.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/it-ch.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ms-my.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/nl-be.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/pa-in.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/pt-br.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/tl-ph.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/ug-cn.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-cn.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-hk.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-mo.js ***!
+  \*********************************************/
+
+/*!*********************************************!*\
+  !*** ./node_modules/moment/locale/zh-tw.js ***!
+  \*********************************************/
+
+/*!**********************************************!*\
+  !*** ./node_modules/moment/locale/oc-lnc.js ***!
+  \**********************************************/
+
+/*!***********************************************!*\
+  !*** ./node_modules/moment/locale/sr-cyrl.js ***!
+  \***********************************************/
+
+/*!***********************************************!*\
+  !*** ./node_modules/moment/locale/uz-latn.js ***!
+  \***********************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/gom-deva.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/gom-latn.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/tzm-latn.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./node_modules/moment/locale/x-pseudo.js ***!
+  \************************************************/
+
+/*!*****************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
+  \*****************************************************/
+
+/*!**************************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
+  \**************************************************************/
+
+/*!**************************************************************!*\
+  !*** ./node_modules/datatables.net/js/jquery.dataTables.mjs ***!
+  \**************************************************************/
+
+/*!***************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
+  \***************************************************************/
+
+/*!********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
+  \********************************************************************/
+
+/*!*********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
+  \*********************************************************************/
+
+/*!**********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
+  \**********************************************************************/
+
+/*!****************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
+  \****************************************************************************/
+
+/*!**********************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
+  \**********************************************************************************/

ras/frontend/static/js/vendors-node_modules_datatables_net_js_jquery_dataTables_mjs.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!********************************************!*\
+  !*** ./node_modules/jquery/dist/jquery.js ***!
+  \********************************************/
+
+/*!**************************************************************!*\
+  !*** ./node_modules/datatables.net/js/jquery.dataTables.mjs ***!
+  \**************************************************************/

ras/frontend/static/js/vendors-node_modules_react-loader-spinner_dist_esm_index_js.js.LICENSE.txt

@@ -0,0 +1,211 @@
+/*!****************************************!*\
+  !*** ./node_modules/react-is/index.js ***!
+  \****************************************/
+
+/*!********************************************!*\
+  !*** ./node_modules/shallowequal/index.js ***!
+  \********************************************/
+
+/*!***************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/prop.js ***!
+  \***************************************************/
+
+/*!****************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/index.js ***!
+  \****************************************************/
+
+/*!****************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/theme.js ***!
+  \****************************************************/
+
+/*!*****************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/ifProp.js ***!
+  \*****************************************************/
+
+/*!******************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/palette.js ***!
+  \******************************************************/
+
+/*!*******************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/withProp.js ***!
+  \*******************************************************/
+
+/*!********************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/ifNotProp.js ***!
+  \********************************************************/
+
+/*!*********************************************************!*\
+  !*** ./node_modules/styled-tools/dist/es/switchProp.js ***!
+  \*********************************************************/
+
+/*!***********************************************************!*\
+  !*** ./node_modules/react-is/cjs/react-is.development.js ***!
+  \***********************************************************/
+
+/*!************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/type.js ***!
+  \************************************************************/
+
+/*!*************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/index.js ***!
+  \*************************************************************/
+
+/*!***************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/helpers.js ***!
+  \***************************************************************/
+
+/*!*****************************************************************!*\
+  !*** ./node_modules/@emotion/stylis/dist/stylis.browser.esm.js ***!
+  \*****************************************************************/
+
+/*!******************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Dna.js ***!
+  \******************************************************************/
+
+/*!*******************************************************************!*\
+  !*** ./node_modules/@emotion/memoize/dist/emotion-memoize.esm.js ***!
+  \*******************************************************************/
+
+/*!*******************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Bars.js ***!
+  \*******************************************************************/
+
+/*!*******************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Grid.js ***!
+  \*******************************************************************/
+
+/*!*******************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Oval.js ***!
+  \*******************************************************************/
+
+/*!*******************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Puff.js ***!
+  \*******************************************************************/
+
+/*!********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Audio.js ***!
+  \********************************************************************/
+
+/*!********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Radio.js ***!
+  \********************************************************************/
+
+/*!********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Rings.js ***!
+  \********************************************************************/
+
+/*!********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Watch.js ***!
+  \********************************************************************/
+
+/*!*********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Blocks.js ***!
+  \*********************************************************************/
+
+/*!*********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Hearts.js ***!
+  \*********************************************************************/
+
+/*!*********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Vortex.js ***!
+  \*********************************************************************/
+
+/*!**********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Circles.js ***!
+  \**********************************************************************/
+
+/*!**********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Comment.js ***!
+  \**********************************************************************/
+
+/*!**********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Discuss.js ***!
+  \**********************************************************************/
+
+/*!***********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/LineWave.js ***!
+  \***********************************************************************/
+
+/*!***********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/TailSpin.js ***!
+  \***********************************************************************/
+
+/*!***********************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/Triangle.js ***!
+  \***********************************************************************/
+
+/*!************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/ColorRing.js ***!
+  \************************************************************************/
+
+/*!************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/ThreeDots.js ***!
+  \************************************************************************/
+
+/*!**************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/ProgressBar.js ***!
+  \**************************************************************************/
+
+/*!***************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/BallTriangle.js ***!
+  \***************************************************************************/
+
+/*!***************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/FallingLines.js ***!
+  \***************************************************************************/
+
+/*!***************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/InfinitySpin.js ***!
+  \***************************************************************************/
+
+/*!***************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/MutatingDots.js ***!
+  \***************************************************************************/
+
+/*!***************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/RevolvingDot.js ***!
+  \***************************************************************************/
+
+/*!***************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/ThreeCircles.js ***!
+  \***************************************************************************/
+
+/*!****************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/FidgetSpinner.js ***!
+  \****************************************************************************/
+
+/*!****************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/RotatingLines.js ***!
+  \****************************************************************************/
+
+/*!*****************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/CirclesWithBar.js ***!
+  \*****************************************************************************/
+
+/*!*****************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/RotatingSquare.js ***!
+  \*****************************************************************************/
+
+/*!******************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/MagnifyingGlass.js ***!
+  \******************************************************************************/
+
+/*!******************************************************************************!*\
+  !*** ./node_modules/styled-components/dist/styled-components.browser.esm.js ***!
+  \******************************************************************************/
+
+/*!*******************************************************************************!*\
+  !*** ./node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js ***!
+  \*******************************************************************************/
+
+/*!********************************************************************************!*\
+  !*** ./node_modules/react-loader-spinner/dist/esm/loader/RotatingTriangles.js ***!
+  \********************************************************************************/
+
+/*!**********************************************************************************!*\
+  !*** ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js ***!
+  \**********************************************************************************/
+
+/*!****************************************************************************************************!*\
+  !*** ./node_modules/styled-components/node_modules/@emotion/unitless/dist/unitless.browser.esm.js ***!
+  \****************************************************************************************************/

ras/ras/urls.py

@@ -20,4 +20,5 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/', include('api.urls')),
     path('', include('frontend.urls')),
+    path('booklist/', include('frontend.urls')),
 ]