Merge pull request #28 from roziqinkhoeru/main #build

`feat(admin)` update admin features
educational-game-project · Feb 24, 2024 · d8baf65 · d8baf65
2 parents 4ac7e6b + 6b9440c
commit d8baf65
Show file tree

Hide file tree

Showing 39 changed files with 1,229 additions and 497 deletions.
diff --git a/note.txt b/note.txt
@@ -1,2 +1,6 @@
 💡!!BACKLOG!!
-- import type
+- management alert
+- alert error
+- number table
+- error section or page
+- functionality table select
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react-hook-form": "^7.48.2",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.17.0",
+    "react-svg-spinners": "^0.3.1",
     "react-toastify": "^9.1.3",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.0.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -117,7 +117,7 @@ function App() {
                     element={<Support />}
                   />
                   <Route
-                    path="/profile"
+                    path="/profile/account"
                     element={<Profile />}
                   />
                   <Route

diff --git a/src/common/Layout.tsx b/src/common/Layout.tsx
@@ -37,21 +37,21 @@ function Layout() {
           />
           <SidebarItem
             icon={<UserSquare2 size={20} />}
-            text="Students"
+            text="Siswa"
             path="/student"
             alert={true}
             active={isCurrentLocation('student')}
           />
           <SidebarItem
             icon={<MousePointerClick size={20} />}
-            text="Score"
+            text="Skor"
             path="/score"
             alert={true}
             active={isCurrentLocation('score')}
           />
           <SidebarItem
             icon={<LineChart size={20} />}
-            text="Analysis"
+            text="Analisis"
             path="/analysis"
             alert={false}
             active={isCurrentLocation('analysis')}
@@ -70,7 +70,7 @@ function Layout() {
               />
               <SidebarItem
                 icon={<SchoolIcon size={20} />}
-                text="School"
+                text="Sekolah"
                 path="/school"
                 alert={false}
                 active={isCurrentLocation('school')}

diff --git a/src/common/Navbar.tsx b/src/common/Navbar.tsx
@@ -79,12 +79,15 @@ function Navbar() {
                   </div>
                 </button>
                 <Link
-                  to="/profile"
+                  to="/profile/account"
                   title="Profile">
                   <img
-                    src={`https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true&name=${transformStringPlus(
-                      user?.name
-                    )}`}
+                    src={
+                      user?.image?.fileLink ??
+                      `https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true&name=${transformStringPlus(
+                        user?.name
+                      )}`
+                    }
                     alt={`${user?.name} profile`}
                     className="w-9 h-9 rounded-full object-cover object-center"
                   />

diff --git a/src/common/Sidebar.tsx b/src/common/Sidebar.tsx
@@ -86,10 +86,10 @@ export default function Sidebar({ children, currentPath }: SidebarProps) {
         <div className="px-4 py-5 flex justify-between items-center">
           <Link to="/">
             <img
-              src="https://img.logoipsum.com/243.svg"
+              src="https://img.logoipsum.com/297.svg"
               className={`overflow-hidden transition-all ${
                 isExpanded ? 'w-32' : 'w-0'
-              }`}
+              } dark:filter-invert dark:grayscale-100`}
               alt="logo admin panel"
             />
           </Link>
@@ -119,16 +119,16 @@ export default function Sidebar({ children, currentPath }: SidebarProps) {
             }`}
             onClick={() => setProfileToggle((curr) => !curr)}>
             <img
-              src={`https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true&name=${transformStringPlus(
-                user?.name
-              )}`}
+              src={
+                user?.image?.fileLink ??
+                `https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true&name=${transformStringPlus(
+                  user?.name
+                )}`
+              }
               alt={`${user?.name} profile`}
               className={`${
                 isExpanded ? 'w-10 h-10' : 'w-9 h-9'
-              } rounded-full object-cover object-center ${
-                isProfileLocation &&
-                'border-3 border-indigo-700 dark:border-indigo-200'
-              }`}
+              } rounded-full object-cover object-center`}
             />
             <div
               className={`
@@ -178,13 +178,16 @@ export default function Sidebar({ children, currentPath }: SidebarProps) {
           <div className="bg-white w-56 rounded-lg p-3 shadow border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
             <div className="flex mb-2.5">
               <img
-                src={`https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true&name=${transformStringPlus(
-                  user?.name
-                )}`}
+                src={
+                  user?.image?.fileLink ??
+                  `https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true&name=${transformStringPlus(
+                    user?.name
+                  )}`
+                }
                 alt={`${user?.name} profile`}
                 className="w-9 h-9 rounded-full object-cover object-center"
               />
-              <div className="flex justify-between items-center overflow-hidden transition-all ml-2">
+              <div className="flex justify-between items-center overflow-hidden ml-2">
                 <div className="leading-4">
                   <h4 className="font-semibold mb-0.5 text-3.25xs line-clamp-1 text-ellipsis">
                     {user?.name}
@@ -208,19 +211,21 @@ export default function Sidebar({ children, currentPath }: SidebarProps) {
                 )}
                 <span className="ml-2.5 text-sm">Dark Mode</span>
               </div>
-              <div className="absolute right-2">
-                <label className="relative inline-block w-10 h-5">
-                  <input
-                    id="darkMode"
-                    name="darkMode"
-                    type="checkbox"
-                    checked={theme === 'dark'}
-                    onChange={() => dispatch(toggleTheme())}
-                    className="peer/darkMode opacity-0 w-0 h-0"
-                  />
-                  <span className="slider round absolute cursor-pointer top-0 bottom-0 right-0 left-0 bg-gray-300 transition-all duration-400 rounded-8.5 before:absolute before:content-empty before:h-4 before:w-4 before:left-0.5 before:bottom-0.5 before:bg-white before:transition-all before:duration-400 before:rounded-half peer-checked/darkMode:bg-indigo-500 peer-checked/darkMode:before:translate-x-5"></span>
-                </label>
-              </div>
+              {profileToggle && (
+                <div className="absolute right-2">
+                  <label className="relative inline-block w-10 h-5">
+                    <input
+                      id="darkMode"
+                      name="darkMode"
+                      type="checkbox"
+                      checked={theme === 'dark'}
+                      onChange={() => dispatch(toggleTheme())}
+                      className="peer/darkMode opacity-0 w-0 h-0"
+                    />
+                    <span className="slider round absolute cursor-pointer top-0 bottom-0 right-0 left-0 bg-gray-300 transition-all duration-400 rounded-8.5 before:absolute before:content-empty before:h-4 before:w-4 before:left-0.5 before:bottom-0.5 before:bg-white before:transition-all before:duration-400 before:rounded-half peer-checked/darkMode:bg-indigo-500 peer-checked/darkMode:before:translate-x-5"></span>
+                  </label>
+                </div>
+              )}
             </div>
             <hr className="mt-2 mb-1.5 dark:border-gray-600/80" />
             <div className="">
@@ -230,11 +235,11 @@ export default function Sidebar({ children, currentPath }: SidebarProps) {
                     ? 'bg-gradient-to-tr from-indigo-200 to-indigo-100 text-indigo-800 dark:from-indigo-600 dark:to-indigo-400 dark:text-gray-100'
                     : 'hover:bg-indigo-50 text-gray-600 dark:hover:bg-gray-700 dark:text-gray-400'
                 }`}
-                to="/profile"
+                to="/profile/account"
                 onClick={() => setProfileToggle(false)}
                 title="Account Settings">
                 <UserCog size={17} />
-                <span className="ml-2.5 text-sm">Account Settings</span>
+                <span className="ml-2.5 text-sm">Pengaturan Akun</span>
               </Link>
               <Link
                 className={`relative flex items-center py-1.5 px-2 my-1 font-medium rounded-md cursor-pointer transition-colors group ${
@@ -246,7 +251,7 @@ export default function Sidebar({ children, currentPath }: SidebarProps) {
                 onClick={() => setProfileToggle(false)}
                 title="Activity">
                 <Activity size={17} />
-                <span className="ml-2.5 text-sm">Activity</span>
+                <span className="ml-2.5 text-sm">Aktivitas</span>
               </Link>
             </div>
             <hr className="mt-2 mb-1.5 dark:border-gray-600/80" />

diff --git a/src/components/AlertDialog/AlertDelete.tsx b/src/components/AlertDialog/AlertDelete.tsx
@@ -19,7 +19,7 @@ function AlertDelete({
         as={Fragment}>
         <Dialog
           as="div"
-          className="relative z-10"
+          className="relative z-30"
           onClose={() => true}>
           <Transition.Child
             as={Fragment}
@@ -29,7 +29,7 @@ function AlertDelete({
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
             leaveTo="opacity-0">
-            <div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
+            <div className="fixed inset-0 bg-black/25 backdrop-blur-sm dark:bg-black/60" />
           </Transition.Child>
 
           <div className="fixed inset-0 overflow-y-auto">
@@ -42,29 +42,29 @@ function AlertDelete({
                 leave="ease-in duration-200"
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95">
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-gray-800">
                   <Dialog.Title
                     as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900">
+                    className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
                     Apakah Anda yakin?
                   </Dialog.Title>
                   <div className="mt-2">
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
                       Data {message} akan dihapus. Anda tidak dapat
                       mengembalikan data yang telah dihapus.
                     </p>
                   </div>
                   <div className="mt-4 flex justify-end">
                     <button
                       type="button"
-                      className="leading-normal inline-flex justify-center rounded-md border border-gray-300 bg-transparent px-4 py-1.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:focus-visible:ring-2 disabled:focus-visible:ring-gray-500 disabled:focus-visible:ring-offset-2"
+                      className="leading-normal inline-flex justify-center rounded-md border border-gray-300 bg-transparent px-4 py-1.5 text-sm font-medium text-gray-900 transition hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:focus-visible:ring-2 disabled:focus-visible:ring-gray-500 disabled:focus-visible:ring-offset-2 dark:border-gray-500 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:border-gray-600 dark:disabled:bg-gray-700 dark:disabled:hover:border-gray-500"
                       disabled={isLoading}
                       onClick={onCancel}>
                       Batal
                     </button>
                     <button
                       type="button"
-                      className="leading-normal ml-3 inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-1.5 text-sm font-medium text-gray-100 hover:bg-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-red-500 disabled:focus-visible:ring-2 disabled:focus-visible:ring-red-500 disabled:focus-visible:ring-offset-2"
+                      className="leading-normal ml-3 inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-1.5 text-sm font-medium text-gray-100 transition hover:bg-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-red-500 disabled:focus-visible:ring-2 disabled:focus-visible:ring-red-500 disabled:focus-visible:ring-offset-2"
                       disabled={isLoading}
                       onClick={onConfirm}>
                       {isLoading ? (

diff --git a/src/components/HeaderContainer.tsx b/src/components/HeaderContainer.tsx
@@ -19,14 +19,14 @@ function HeaderContainer({
         <div className="">
           <Link
             type="button"
-            className="leading-normal ml-4 inline-flex justify-center rounded-lg border border-transparent bg-violet-600 px-4 py-2.5 text-sm font-medium text-gray-100 hover:bg-violet-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-violet-500 disabled:focus-visible:ring-2 disabled:focus-visible:ring-violet-500 disabled:focus-visible:ring-offset-2"
+            className="leading-normal ml-4 inline-flex justify-center rounded-lg border border-transparent bg-violet-600 px-4 py-2.5 text-sm font-medium text-gray-100 hover:bg-violet-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-violet-500 disabled:focus-visible:ring-2 disabled:focus-visible:ring-violet-500 disabled:focus-visible:ring-offset-2 dark:hover:bg-violet-700"
             to={btnHref}>
             <PlusIcon
               size={20}
               className="mr-1.5 stroke-current"
               strokeWidth={2}
             />
-            {btnText}
+            <span className="line-clamp-1">{btnText}</span>
           </Link>
         </div>
       )}

diff --git a/src/features/authSlice.ts b/src/features/authSlice.ts
@@ -43,8 +43,9 @@ export const authSlice = createSlice({
 });
 
 export const { setAuth, setUnAuth } = authSlice.actions;
-export default authSlice.reducer;
 
 export const selectCurrentUser = (state: RootState) => state.auth.user;
 export const selectCurrentToken = (state: RootState) => state.auth.token;
 export const isAuthenticated = (state: RootState) => state.auth.isAuth;
+
+export default authSlice.reducer;
diff --git a/src/features/breadcrumbSlice.ts b/src/features/breadcrumbSlice.ts
@@ -19,7 +19,8 @@ export const breadcrumbSlice = createSlice({
 });
 
 export const { setBreadcrumb } = breadcrumbSlice.actions;
-export default breadcrumbSlice.reducer;
 
 export const selectBreadcrumb = (state: RootState) =>
   state.breadcrumb.breadcrumbs;
+
+export default breadcrumbSlice.reducer;
diff --git a/src/features/profileSlice.ts b/src/features/profileSlice.ts
diff --git a/src/features/sidebarSlice.ts b/src/features/sidebarSlice.ts
@@ -16,6 +16,7 @@ export const sidebarSlice = createSlice({
 });
 
 export const { toggleSidebar } = sidebarSlice.actions;
-export default sidebarSlice.reducer;
 
 export const selectExpanded = (state: RootState) => state.sidebar.showSidebar;
+
+export default sidebarSlice.reducer;
diff --git a/src/features/toastSlice.ts b/src/features/toastSlice.ts
@@ -22,6 +22,6 @@ export const toastSlice = createSlice({
 
 export const { setAllowedToast, setNotAllowedToast } = toastSlice.actions;
 
-export default toastSlice.reducer;
-
 export const selectIsAllowedToast = (state: RootState) => state.toast.isAllowed;
+
+export default toastSlice.reducer;