[WIP] Add authentication workflow

src/components/Footer/Footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Footer() {
   return (
     <div>

src/components/Headers/CardHeader.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { IoMdWoman, IoMdPeople, IoMdMan, IoMdAlbums } from 'react-icons/io';
 
 import CardStatisticsItem from './CardStatisticsItem';

src/components/Headers/SettingsDropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 
 import { Menu, Transition } from '@headlessui/react';
 import { LogoutIcon, UserIcon } from '@heroicons/react/outline';
@@ -10,7 +10,7 @@ const SettingsDropdownMenu = () => {
         <div>
           <Menu.Button className="inline-flex justify-center w-full px-4 py-2 rounded-md ">
             <span className="flex flex-col ml-2 h-full">
-              <span className="truncate w-30 text-black font-semibold tracking-wide leading-none">
+              <span className="w-30 text-black font-semibold tracking-wide leading-none">
                 Bupe Mulenga
               </span>
             </span>

src/config/config.ts

@@ -0,0 +1,5 @@
+const config = {
+  defaults: { namespace: 'app' },
+};
+
+export default config;

src/config/logging.ts

@@ -0,0 +1,54 @@
+import config from './config';
+
+const DEFAULT_NAMESPACE = config.defaults.namespace;
+
+const getDate = () => {
+  return new Date().toISOString();
+};
+
+const info = (message: any, namespace?: string) => {
+  if (typeof message === 'string') {
+    console.log(
+      `[${getDate()}] [${namespace || DEFAULT_NAMESPACE}] [INFO] ${message}`
+    );
+  } else {
+    console.log(
+      `[${getDate()}] [${namespace || DEFAULT_NAMESPACE}] [INFO]`,
+      message
+    );
+  }
+};
+
+const warn = (message: any, namespace?: string) => {
+  if (typeof message === 'string') {
+    console.log(
+      `[${getDate()}] [${namespace || DEFAULT_NAMESPACE}] [WARN] ${message}`
+    );
+  } else {
+    console.log(
+      `[${getDate()}] [${namespace || DEFAULT_NAMESPACE}] [WARN]`,
+      message
+    );
+  }
+};
+
+const error = (message: any, namespace?: string) => {
+  if (typeof message === 'string') {
+    console.log(
+      `[${getDate()}] [${namespace || DEFAULT_NAMESPACE}] [ERROR] ${message}`
+    );
+  } else {
+    console.log(
+      `[${getDate()}] [${namespace || DEFAULT_NAMESPACE}] [ERROR]`,
+      message
+    );
+  }
+};
+
+const logging = {
+  info,
+  warn,
+  error,
+};
+
+export default logging;

src/config/routes.ts

@@ -0,0 +1,60 @@
+import IRoutes from '../interfaces/routes';
+import Agents from '../pages/agents';
+import Beneficiary from '../pages/beneficiary/index';
+import Dashboard from '../pages/dashboard';
+import Location from '../pages/location';
+import Occupation from '../pages/occupation';
+import Users from '../pages/users';
+
+const routes: IRoutes[] = [
+  {
+    path: '/dashboard',
+    name: 'Dashboard Page',
+    component: Dashboard,
+    exact: true,
+  },
+  {
+    path: '/beneficiary/index',
+    name: 'Beneficiary Page',
+    component: Beneficiary,
+    exact: true,
+  },
+  {
+    path: '/location',
+    name: 'Location Page',
+    component: Location,
+    exact: true,
+  },
+  {
+    path: '/occuoation',
+    name: 'Occupation Page',
+    component: Occupation,
+    exact: true,
+  },
+  {
+    path: '/agents',
+    name: 'Agents Page',
+    component: Agents,
+    exact: true,
+  },
+  {
+    path: '/users',
+    name: 'User Management Page',
+    component: Users,
+    exact: true,
+  },
+  {
+    path: '/auth/login',
+    name: 'Login Page',
+    component: 'User Management Component',
+    exact: true,
+  },
+  {
+    path: '/auth/registration',
+    name: 'User Management Page',
+    component: 'User Management Component',
+    exact: true,
+  },
+];
+
+export default routes;

src/interfaces/routes.ts

@@ -0,0 +1,7 @@
+export default interface IRoutes {
+  path: string;
+  name: string;
+  component: any;
+  exact: boolean;
+  props?: any;
+}

src/pages/_app.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import React from 'react';
 
 import type { NextPage } from 'next';
 import { AppProps } from 'next/app';

src/pages/agents.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const beneficiaries = [
   {
     agentId: 1,
@@ -30,7 +28,7 @@ const beneficiaries = [
     location: 'Chipata',
   },
 ];
-export default function Beneficiary() {
+export default function Agents() {
   return (
     <div className="main-content flex flex-col flex-grow p-4">
       <h1 className="font-bold text-2xl text-gray-700">Agents</h1>

src/pages/auth/login.tsx

@@ -0,0 +1,73 @@
+import { LockOpenIcon } from '@heroicons/react/outline';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import mainLogo from '../../assets/undp-logo.png';
+
+export default function Login() {
+  const router = useRouter();
+  return (
+    <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 ">
+      <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 ml-2 justify-center">
+        <div className="mb-6">
+          <h6 className="mt-6 text-center text-3xl font-bold text-gray-900">
+            Welcome
+          </h6>
+          <div className="flex justify-center mt-4">
+            <Image className="object-contain" src={mainLogo} />
+          </div>
+        </div>
+
+        <div className="grid grid-rows-1 grid-flow-row mb-8">
+          <div className="mb-2">
+            <label
+              className="block text-gray-700 text-sm font-bold mb-2"
+              htmlFor="email"
+            >
+              Email
+            </label>
+            <input
+              className="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:bg-white"
+              id="email"
+              type="text"
+              placeholder="Email"
+            />
+          </div>
+        </div>
+        <div className="grid grid-rows-1 grid-flow-row mb-8">
+          <label
+            className="block text-gray-700 text-sm font-bold mb-2"
+            htmlFor="password"
+          >
+            Password
+          </label>
+          <input
+            className="shadow appearance-none border   w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline focus:bg-white"
+            id="password"
+            type="password"
+            placeholder="******************"
+          />
+        </div>
+
+        <div>
+          <button
+            type="submit"
+            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            onSubmit={() => {
+              router.push('/dashboard');
+              console.log('submit');
+            }}
+          >
+            <span className="absolute left-0 inset-y-0 flex items-center pl-3">
+              <LockOpenIcon
+                className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
+                aria-hidden="true"
+              />
+            </span>
+            Login
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/pages/auth/registration.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { LockClosedIcon } from '@heroicons/react/outline';
 import Image from 'next/image';
 

src/pages/beneficiary/index.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { NextPage } from 'next';
 
 import Pagination from '../../components/Pagination';
+import { config } from '../../config';
 import { Props } from '../../types';
-import { config } from  '../../config';
 
 const BeneficiaryTable: NextPage<Props> = ({ data }) => {
   const { results } = data;

src/pages/index.tsx

@@ -1,9 +1,15 @@
-// import { useRouter } from 'next/router';
+import React from 'react';
+
+import { useRouter } from 'next/router';
 
 import App from './_app';
 
 const Index = () => {
-  // const router = useRouter();
+  const router = useRouter();
+
+  React.useEffect(() => {
+    router.push('/auth/login');
+  }, []);
 
   return App;
 };

src/pages/settings.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Settings() {
   return (
     <div className="main-content flex flex-col flex-grow p-4">

src/pages/users.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
-
 export default function Users() {
   return (
-    <div className="main-content flex flex-col flex-grow p-4">
-      <h1 className="font-bold text-2xl text-gray-700">Users</h1>
+    <div className="flex pt-4 pl-4 justify-between">
+      <div className="flex">
+        <h1 className="font-bold text-2xl text-gray-700">Users</h1>
+      </div>
 
-      <div className="flex flex-col flex-grow border-4 border-gray-400 border-dashed bg-white rounded mt-4"></div>
+      <div className="flex space-x-4 text-gray-400 mr-3">
+        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mr-8 rounded">
+          Add User
+        </button>
+      </div>
     </div>
   );
 }