Merge branch 'main' of github.com:librarian-org/librarian

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
 github: [librarian-org]
-patreon: # Replace with a single Patreon username
+patreon: librarianorg
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/librarian-org/librarian/issues"
   },
   "productName": "librarian",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "The Librarian app is ideal for schools libraries and for someone who have many books.",
   "main": ".webpack/main",
   "scripts": {
@@ -104,6 +104,7 @@
     "react-spinners-kit": "^1.9.1",
     "react-spring": "^9.3.2",
     "react-table": "^7.7.0",
+    "recharts": "^2.1.13",
     "reflect-metadata": "^0.1.13",
     "sqlite3": "^5.0.2",
     "styled-components": "^5.3.3",

src/app/@types/index.d.ts

@@ -1,6 +1,6 @@
 export interface Api {
   send: (channel: string, data: unknown) => void;
-  sendSync: (channel: string, data: unknown) => unknown;
+  sendSync: (channel: string, data?: unknown) => unknown;
   on: (channel: string, listener: (event: any, ...arg: any) => void) => void;
   once: (channel: string, listener: (event: any, ...arg: any) => void) => void;
   removeListener: (channel: string, listener: (event: any, ...arg: any) => void) => void;

src/app/components/Dashboard/index.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { FaHandshake } from 'react-icons/fa';
+import { FiAlertTriangle, FiBook, FiUsers } from 'react-icons/fi';
+import i18n from '../../i18n';
+import Panel from '../Panel';
+import PanelBody from '../Panel/PanelBody';
+import PanelFooter from '../Panel/PanelFooter';
+import { Container, Row, Wrapper } from './styles';
+
+const Dashboard: React.FC = () => {
+  const [registeredSamples, setRegisteredSamples] = useState(0);
+  const [registeredPeople, setRegisteredPeople] = useState(0);
+  const [activeBorrows, setActiveBorrows] = useState(0);
+  const [overdueBorrows, setOverdueBorrows] = useState(0);
+
+  useEffect(() => {
+    const samples = window.api.sendSync('regiteredSamples') as number;
+    setRegisteredSamples(samples);
+
+    const people = window.api.sendSync('regiteredPeople') as number;
+    setRegisteredPeople(people);
+
+    const actives = window.api.sendSync('activeBorrows') as number;
+    setActiveBorrows(actives);
+
+    const overdues = window.api.sendSync('overdueBorrows') as number;
+    setOverdueBorrows(overdues);
+  }, []);
+
+  return (
+    <Container>
+      <Wrapper>
+        <Row>
+          <Panel color={'#fe5d70'}>
+            <PanelBody icon={FiAlertTriangle}>{overdueBorrows}</PanelBody>
+            <PanelFooter color={'#fe5d70'}>
+              {i18n.t('dashboard.overdueBorrows')}
+            </PanelFooter>
+          </Panel>
+          <Panel color={'#fe9365'}>
+            <PanelBody icon={FaHandshake}>{activeBorrows}</PanelBody>
+            <PanelFooter color={'#fe9365'}>
+              {i18n.t('dashboard.activeBorrows')}
+            </PanelFooter>
+          </Panel>
+          <Panel color={'#01a9ac'}>
+            <PanelBody icon={FiBook}>{registeredSamples}</PanelBody>
+            <PanelFooter color={'#01a9ac'}>
+              {i18n.t('dashboard.registeredSamples')}
+            </PanelFooter>
+          </Panel>
+          <Panel color={'#0ac282'}>
+            <PanelBody icon={FiUsers}>{registeredPeople}</PanelBody>
+            <PanelFooter color={'#0ac282'}>
+              {i18n.t('dashboard.registeredPeople')}
+            </PanelFooter>
+          </Panel>
+        </Row>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default Dashboard;

src/app/components/Dashboard/styles.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  padding: 24px;
+`;
+
+export const Wrapper = styled.div`
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  & > div {
+    margin: 16px;
+  }
+`;

src/app/components/Panel/PanelBody/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconBaseProps } from 'react-icons';
+
+import { Container } from './styles';
+
+interface PanelBodyProps {
+  icon?: React.ComponentType<IconBaseProps>;
+}
+
+const PanelBody: React.FC<PanelBodyProps> = ({
+  children,
+  icon: Icon,
+}) => {
+  return (
+    <Container>
+      {children}
+      {Icon && <Icon size={30} />}
+    </Container>
+  );
+};
+
+export default PanelBody;

src/app/components/Panel/PanelBody/styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.h1`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  padding: 16px;
+  color: #D1D1D1;
+`;

src/app/components/Panel/PanelFooter/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Container } from './styles';
+
+interface PanelFooterProps {
+  color: string;
+}
+
+const PanelFooter: React.FC<PanelFooterProps> = ({ color, children }) => {
+  return <Container backgroundColor={color}>{children}</Container>;
+};
+
+export default PanelFooter;

src/app/components/Panel/PanelFooter/styles.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import {shade} from 'polished';
+
+interface ContainerProps {
+  backgroundColor: string;
+}
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  color: #D1D1D1;
+  background: ${props => shade(0.1, props.backgroundColor)};
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+`;

src/app/components/Panel/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Container } from './styles';
+
+interface PanelProps {
+  color: string;
+}
+
+const Panel: React.FC<PanelProps> = ({ color, children }) => {
+  return (
+    <Container backgroundColor={color}>
+      {children}
+    </Container>
+  );
+};
+
+export default Panel;

src/app/components/Panel/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+interface ContainerProps {
+  backgroundColor: string;
+}
+
+export const Container = styled.div<ContainerProps>`
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  background-color: ${props => props.backgroundColor};
+  color: #D1D1D1;
+`;
+

src/app/components/Tabs/TabHeader/index.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { Tab } from '../Tab';
 import { FiX, FiBook, FiUser, FiSettings } from 'react-icons/fi';
 import { FaHandshake } from 'react-icons/fa';
+import { AiFillDashboard } from 'react-icons/ai';
 import { Container } from './styles';
 import Translator from '../../I18n/Translator';
 import { DropTargetMonitor, useDrag, useDrop, XYCoord } from 'react-dnd';
@@ -103,6 +104,7 @@ const TabHeader: React.FC<TabHeaderProps> = ({ moveTab, index, title, id, onClic
         {tab.type === 'person' && (<FiUser size={14} color="#ff78f7" />)}
         {tab.type === 'borrow' && (<FaHandshake size={14} color="#50fa7b" />)}
         {tab.type === 'settings' && (<FiSettings size={14} color="#e3bb06" />)}
+        {tab.type === 'dashboard' && (<AiFillDashboard size={14} color="#CC0000" />)}
       </div>
       <span><Translator path={title} /></span>
       <div>

src/app/components/Tabs/index.tsx

@@ -4,9 +4,6 @@ import React, {
   useMemo,
   useState,
   useRef,
-  MutableRefObject,
-  Ref,
-  RefObject,
 } from 'react';
 import { on, off } from '../../util/EventHandler';
 import { v4 } from 'uuid';
@@ -20,6 +17,7 @@ import Borrow from '../Borrow';
 import Title from '../Title';
 import Person from '../Person';
 import Settings from '../Settings';
+import Dashboard from '../Dashboard';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -47,7 +45,6 @@ const Tabs: React.FC = () => {
   const [, setAction] = useState('list');
   const globalSave = useRef(null);
 
-
   const lastTab = useCallback((): Tab => {
     return tabItems[tabItems.length - 1];
   }, [tabItems]);
@@ -166,6 +163,10 @@ const Tabs: React.FC = () => {
     handleCreateTab('settings', Actions.update, {});
   }, [handleCreateTab]);
 
+  const dashboardTab = useCallback(() => {
+    handleCreateTab('dashboard', Actions.create, {});
+  }, [handleCreateTab]);
+
   const quickSearch = useCallback(() => {
     setOpen((oldState) => !oldState);
   }, []);
@@ -184,6 +185,7 @@ const Tabs: React.FC = () => {
       { event: 'titleTab', handler: titleTab },
       { event: 'settingsTab', handler: settingsTab },
       { event: 'quickSearch', handler: quickSearch },
+      { event: 'dashboardTab', handler: dashboardTab },
       { event: 'save', handler: save },
     ],
     [
@@ -193,6 +195,7 @@ const Tabs: React.FC = () => {
       titleTab,
       settingsTab,
       quickSearch,
+      dashboardTab,
       save,
     ]
   );
@@ -281,6 +284,9 @@ const Tabs: React.FC = () => {
                   {tab.type === 'settings' && (
                     <Settings globalSave={globalSave} />
                   )}
+                  {tab.type === 'dashboard' && (
+                    <Dashboard />
+                  )}
                 </TabContent>
               )
           )}

src/app/util/AppEventHandler.ts

@@ -18,6 +18,7 @@ export default class {
   registerCallbacks(): void {
     window.api.on(AppEvent.languageChange, this.languageChange.bind(this));
 
+    this.forward(AppEvent.dashboardTab);
     this.forward(AppEvent.borrowTab);
     this.forward(AppEvent.personTab);
     this.forward(AppEvent.titleTab);

src/common/AppEvent.ts

@@ -1,5 +1,6 @@
 export enum AppEvent {
   languageChange = 'languageChange',
+  dashboardTab = 'dashboardTab',
   borrowTab = 'borrowTab',
   personTab = 'personTab',
   titleTab = 'titleTab',

src/electron/Main.ts

@@ -18,6 +18,7 @@ import I18NextAdapter from './infra/i18n/I18NextAdapter';
 import I18nAdapter from './data/protocols/I18n/I18n';
 import Resource from './data/protocols/Resource/Resource';
 import EntitiesConfigs from './database/EntitiesConfigs';
+import { Repository } from './data/protocols';
 
 export default class Main {
   private connection: Connection;
@@ -105,8 +106,15 @@ export default class Main {
         listener.listenerName,
         async (event: IpcMainEvent, content: Event[]) => {
           try {
+            let repository: Repository;
+            if (content[0] === undefined) {
+              repository = repositoryFactory.make(listener.repositoryName);
+              event.returnValue = await repository.execute();
+              return;
+            }
+
             const { value, entity } = content[0];
-            const repository = repositoryFactory.make(
+            repository = repositoryFactory.make(
               listener.repositoryName,
               entity
             );

src/electron/data/protocols/Menu/MenuActionHandler.ts

@@ -3,6 +3,7 @@ import { BrowserWindow, MenuItem } from 'electron';
 type ElectronWindow = BrowserWindow | undefined;
 
 export interface MenuActionHandler {
+  showDashboard: (menuItem: MenuItem, win: ElectronWindow) => void;
   newBorrow: (menuItem: MenuItem, win: ElectronWindow) => void;
   newPerson: (menuItem: MenuItem, win: ElectronWindow) => void;
   newTitle: (menuItem: MenuItem, win: ElectronWindow) => void;

src/electron/data/protocols/db/Repository.ts

@@ -5,5 +5,5 @@ import typeORM from 'typeorm';
 export interface Repository {
   repository: typeORM.Repository<unknown>;
   getInstance(): RepositoryBase;
-  execute(content: unknown): Promise<unknown | unknown[]>;
+  execute(content?: unknown): Promise<unknown | unknown[]>;
 }

src/electron/infra/db/RepositoryBase.ts

@@ -10,7 +10,7 @@ export default class RepositoryBase implements Repository {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public async execute(content: unknown): Promise<unknown> {
+  public async execute(content?: unknown): Promise<unknown> {
     throw new Error('Must be implemented on children classes.');
   }
 }

src/electron/infra/db/factories/RepositoryFactory.ts

@@ -20,7 +20,12 @@ export default class RepositoryFactory {
     });
   }
 
-  public make(repository: string, entity: string): Repository {
+  public make(repository: string, entity?: string): Repository {
+    if (!entity) {
+      const dynamicRepository = this.products[repository].getInstance();
+      return dynamicRepository;
+    }
+
     const typeOrmRepository = this.connection.getRepository(entity);
     const dynamicRepository = this.products[repository].getInstance(typeOrmRepository);