Fix/user apps refactor

src/modules/users/Users.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useCallback, useEffect } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { RouteComponentProps, Link } from '@reach/router';
 import { ChevronRightIcon, SearchIcon, PlusIcon } from '@heroicons/react/solid';
-import { CogIcon, KeyIcon, TrashIcon } from '@heroicons/react/outline';
+import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
 import { ConfirmationModal } from 'src/components/Modal';
@@ -13,8 +14,13 @@ export const Users: React.FC<RouteComponentProps> = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
   const [deleteModal, setDeleteModal] = useState(false);
   const [configureModal, setConfigureModal] = useState(false);
+  const [search, setSearch] = useState('');
   const { loadUsers, users } = useUsers();
 
+  const handleSearch = useCallback((event: any) => {
+    setSearch(event.target.value);
+  }, []);
+
   // TODO: Check why it needs any
   const allUsers: any = users.items;
 
@@ -31,6 +37,10 @@ export const Users: React.FC<RouteComponentProps> = () => {
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);
 
+  const filterSearch = useMemo(() => {
+    return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
+  }, [search, allUsers]);
+
   const deleteModalOpen = () => setDeleteModal(true);
   const deleteModalClose = () => setDeleteModal(false);
 
@@ -117,6 +127,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
         <h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
         <div className="mt-3 sm:mt-0 sm:ml-4">
           <button
+            onClick={configureModalOpen}
             type="button"
             className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
           >
@@ -126,9 +137,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
         </div>
       </div>
 
-      <div className="flex justify-between w-100 my-3 items-center">
-        <div>
-          <div className="mr-3 inline-block shadow-sm">
+      <div className="flex justify-between w-100 my-3 items-center mb-5 ">
+        <div className="flex items-center">
+          {/* <div className="mr-3 inline-block shadow-sm">
             <label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
               Location
             </label>
@@ -143,9 +154,9 @@ export const Users: React.FC<RouteComponentProps> = () => {
               <option>Admins</option>
               <option>Members</option>
             </select>
-          </div>
+          </div> */}
 
-          <div className="mb-5 inline-block">
+          <div className="inline-block">
             <label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
               Search candidates
             </label>
@@ -160,6 +171,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
                   id="email"
                   className="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-md pl-10 sm:text-sm border-gray-200"
                   placeholder="Search Users"
+                  onChange={handleSearch}
                 />
               </div>
             </div>
@@ -168,14 +180,6 @@ export const Users: React.FC<RouteComponentProps> = () => {
 
         {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
           <div className="flex items-center">
-            <button
-              type="button"
-              className="mr-3 inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
-            >
-              <KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-              Edit app access
-            </button>
-
             <button
               onClick={deleteModalOpen}
               type="button"
@@ -192,7 +196,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
         <div className="-my-2 sm:-mx-6 lg:-mx-8">
           <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
             <div className="shadow border-b border-gray-200 sm:rounded-lg">
-              <Table data={allUsers} columns={columns} getSelectedRowIds={selectedRows} selectable />
+              <Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
             </div>
           </div>
         </div>

src/modules/users/components/UserModal/UserModal.tsx

@@ -1,85 +1,122 @@
-import React, { Fragment, useRef } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import { Tabs } from 'src/components';
-import { UserDetailsTab } from './components/UserDetailsTab';
-import { AdvancedTab } from './components/AdvancedTab';
-import { AppAccessTab } from './components/AppAccess';
-
-type UserModalProps = {
-  open: boolean;
-  onClose: () => void;
-  onSave?: () => void;
-};
-
-const tabs = [
-  { name: 'User Details', component: <UserDetailsTab /> },
-  { name: 'Advanced', component: <AdvancedTab /> },
-  { name: 'App Access', component: <AppAccessTab /> },
-];
+import React from 'react';
+import { Modal } from 'src/components';
+import { appAccessList } from './consts';
+import { UserModalProps } from './types';
 
 export const UserModal = ({ open, onClose, onSave = () => {} }: UserModalProps) => {
-  const cancelButtonRef = useRef(null);
-
   return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog
-        as="div"
-        auto-reopen="true"
-        className="fixed z-10 inset-0 overflow-y-auto"
-        initialFocus={cancelButtonRef}
-        onClose={onClose}
-      >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
+    <Modal onClose={onClose} open={open} onSave={onSave} useCancelButton>
+      <div className="bg-white px-4">
+        <div className="space-y-4 divide-y divide-gray-200">
+          <div>
+            <div>
+              <h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
+            </div>
 
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                <Tabs tabs={tabs} />
+            <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+              <div className="sm:col-span-3">
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                  Name
+                </label>
+                <div className="mt-1">
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    autoComplete="given-name"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  />
+                </div>
               </div>
-              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                <button
-                  type="button"
-                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
-                  onClick={onSave}
-                >
-                  Save Changes
-                </button>
-                <button
-                  type="button"
-                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                  onClick={onClose}
-                  ref={cancelButtonRef}
-                >
-                  Cancel
-                </button>
+
+              <div className="sm:col-span-3">
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  Email
+                </label>
+                <div className="mt-1">
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    autoComplete="family-name"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  />
+                </div>
+              </div>
+
+              <div className="sm:col-span-3">
+                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                  Status
+                </label>
+                <div className="mt-1">
+                  <select
+                    id="status"
+                    name="status"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  >
+                    <option>Active</option>
+                    <option>Inactive</option>
+                    <option>Banned</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="sm:col-span-3">
+                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                  Role
+                </label>
+                <div className="mt-1">
+                  <select
+                    id="status"
+                    name="status"
+                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  >
+                    <option>User</option>
+                    <option>Admin</option>
+                    <option>Super Admin</option>
+                  </select>
+                </div>
               </div>
             </div>
-          </Transition.Child>
+          </div>
+
+          <div>
+            <div className="mt-4">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
+            </div>
+
+            <div>
+              <div className="flow-root mt-6">
+                <ul className="-my-5 divide-y divide-gray-200 ">
+                  {appAccessList.map((app: any) => {
+                    return (
+                      <li className="py-4" key={app.name}>
+                        <div className="flex items-center space-x-4">
+                          <div className="flex-shrink-0 flex-1 flex items-center">
+                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
+                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
+                          </div>
+                          <div>
+                            <select
+                              id={app.name}
+                              name={app.name}
+                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                            >
+                              <option>User</option>
+                              <option>Admin</option>
+                              <option>Super Admin</option>
+                            </select>
+                          </div>
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </Modal>
   );
 };

src/modules/users/components/UserModal/components/AdvancedTab.tsx

@@ -1,113 +0,0 @@
-import React, { useState } from 'react';
-import { InformationCircleIcon } from '@heroicons/react/solid';
-import { Switch } from '@headlessui/react';
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export const AdvancedTab = () => {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <div>
-      <div className="rounded-md py-2 mb-6">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <InformationCircleIcon className="h-5 w-5 text-blue-500" aria-hidden="true" />
-          </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-gray-900">You can give or revoke app access for this user</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <span className="flex-grow flex flex-col">
-            <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-              User
-            </Switch.Label>
-            <Switch.Description as="span" className="text-sm text-gray-500">
-              Gives this user access only to assigned apps.
-            </Switch.Description>
-          </span>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <span className="flex-grow flex flex-col">
-            <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-              Admin
-            </Switch.Label>
-            <Switch.Description as="span" className="text-sm text-gray-500">
-              Gives this user access to all apps and permission to change other users roles
-            </Switch.Description>
-          </span>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <span className="flex-grow flex flex-col">
-            <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-              Super Admin
-            </Switch.Label>
-            <Switch.Description as="span" className="text-sm text-gray-500">
-              Will transfer all Super Admin rights to this user
-            </Switch.Description>
-          </span>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-    </div>
-  );
-};

src/modules/users/components/UserModal/components/AppAccess.tsx

@@ -1,138 +0,0 @@
-import React, { useState } from 'react';
-import { Switch } from '@headlessui/react';
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export const AppAccessTab = () => {
-  const [enabled, setEnabled] = useState(false);
-
-  return (
-    <div>
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wekan.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Wekan
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/wordpress.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Wordpress
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/nextcloud.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Nextcloud
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-
-      <div className="mb-6">
-        <Switch.Group as="div" className="flex items-center justify-between">
-          <div className="flex-grow flex items-center">
-            <div className="flex-shrink-0 h-10 w-10 mr-4">
-              <img className="h-10 w-10 rounded-md overflow-hidden" src="/assets/rocketchat.svg" alt="" />
-            </div>
-            <div className="flex flex-col">
-              <Switch.Label as="span" className="text-lg font-medium text-gray-900" passive>
-                Rocketchat
-              </Switch.Label>
-            </div>
-          </div>
-          <Switch
-            checked={enabled}
-            onChange={setEnabled}
-            className={classNames(
-              enabled ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-    </div>
-  );
-};

src/modules/users/components/UserModal/components/UserDetailsTab.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-
-export const UserDetailsTab = () => {
-  return (
-    <div className="space-y-8 divide-y divide-gray-200">
-      <div>
-        <div>
-          <h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
-        </div>
-
-        <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
-          <div className="sm:col-span-3">
-            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-              Name
-            </label>
-            <div className="mt-1">
-              <input
-                type="text"
-                name="name"
-                id="name"
-                autoComplete="given-name"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-              Email
-            </label>
-            <div className="mt-1">
-              <input
-                type="email"
-                name="email"
-                id="email"
-                autoComplete="family-name"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700">
-              Current Password
-            </label>
-            <div className="mt-1">
-              <input
-                type="password"
-                name="currentPassword"
-                id="currentPassword"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
-              Confirm Password
-            </label>
-            <div className="mt-1">
-              <input
-                type="password"
-                name="confirmPassword"
-                id="confirmPassword"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              />
-            </div>
-          </div>
-
-          <div className="sm:col-span-3">
-            <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-              Status
-            </label>
-            <div className="mt-1">
-              <select
-                id="status"
-                name="status"
-                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-              >
-                <option>Active</option>
-                <option>Inactive</option>
-                <option>Banned</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/modules/users/components/UserModal/consts.ts

@@ -0,0 +1,18 @@
+export const appAccessList = [
+  {
+    image: '/assets/wekan.svg',
+    name: 'Wekan',
+  },
+  {
+    image: '/assets/wordpress.svg',
+    name: 'Wordpress',
+  },
+  {
+    image: '/assets/nextcloud.svg',
+    name: 'NextCloud',
+  },
+  {
+    image: '/assets/rocketchat.svg',
+    name: 'RocketChat',
+  },
+];

src/modules/users/components/UserModal/types.ts

@@ -0,0 +1,5 @@
+export type UserModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSave?: () => void;
+};