From 01447d01509e9954f26961376384522e1a5763dd Mon Sep 17 00:00:00 2001
From: Tareq Hasan <tareq1988@gmail.com>
Date: Wed, 17 Jan 2024 15:00:45 +0600
Subject: [PATCH] added admin status page

---
 .../Controllers/Admin/DashboardController.php |  14 +
 .../Controllers/Admin/SettingsController.php  |  14 +
 .../Controllers/Admin/StatusController.php    |  71 ++++
 .../Controllers/Frontend/HomeController.php   |   2 +-
 .../Controllers/Frontend/PostController.php   |   1 -
 app/Http/Middleware/HandleInertiaRequests.php |   2 +
 app/Models/Status.php                         |   9 +-
 ...024_01_06_123142_create_statuses_table.php |   2 +
 database/seeders/DatabaseSeeder.php           |  17 +-
 database/seeders/StatusSeeder.php             |  11 +-
 package.json                                  |   7 +-
 resources/js/Layouts/AuthenticatedLayout.tsx  |  38 +-
 resources/js/Pages/Admin/Dashboard.tsx        |  30 ++
 resources/js/Pages/Admin/Status.tsx           | 338 ++++++++++++++++
 resources/js/Pages/Dashboard.tsx              |  28 --
 .../js/Pages/Frontend/Board/PostForm.tsx      |   2 -
 resources/js/hooks/useSearchParams.tsx        |  42 ++
 resources/js/types/index.d.ts                 |   4 +
 routes/web.php                                |  12 +-
 yarn.lock                                     | 382 +++++++++++++++++-
 20 files changed, 960 insertions(+), 66 deletions(-)
 create mode 100644 app/Http/Controllers/Admin/DashboardController.php
 create mode 100644 app/Http/Controllers/Admin/SettingsController.php
 create mode 100644 app/Http/Controllers/Admin/StatusController.php
 create mode 100644 resources/js/Pages/Admin/Dashboard.tsx
 create mode 100644 resources/js/Pages/Admin/Status.tsx
 delete mode 100644 resources/js/Pages/Dashboard.tsx
 create mode 100644 resources/js/hooks/useSearchParams.tsx

diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
new file mode 100644
index 0000000..e454fd3
--- /dev/null
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class DashboardController extends Controller
+{
+    public function index()
+    {
+        return inertia('Admin/Dashboard');
+    }
+}
diff --git a/app/Http/Controllers/Admin/SettingsController.php b/app/Http/Controllers/Admin/SettingsController.php
new file mode 100644
index 0000000..93e8878
--- /dev/null
+++ b/app/Http/Controllers/Admin/SettingsController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class SettingsController extends Controller
+{
+    public function index()
+    {
+        return inertia('Admin/Settings');
+    }
+}
diff --git a/app/Http/Controllers/Admin/StatusController.php b/app/Http/Controllers/Admin/StatusController.php
new file mode 100644
index 0000000..298d717
--- /dev/null
+++ b/app/Http/Controllers/Admin/StatusController.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Models\Status;
+use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
+use Illuminate\Validation\ValidationException;
+
+class StatusController extends Controller
+{
+    public function index()
+    {
+        $statuses = Status::orderBy('order')->get();
+
+        return inertia('Admin/Status', [
+            'statuses' => $statuses
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|unique:statuses,name',
+            'color' => 'required|string',
+        ]);
+
+        Status::create([
+            'name' => $request->name,
+            'color' => $request->color,
+            'order' => Status::count() + 1,
+        ]);
+
+        return redirect()->back()->with('success', 'Status created.');
+    }
+
+    public function update(Request $request)
+    {
+        $request->validate([
+            'statuses' => 'required|array',
+            'statuses.*.id' => 'required|integer|exists:statuses,id',
+            'statuses.*.name' => 'required|string',
+            'statuses.*.color' => 'required|string',
+            'statuses.*.in_roadmap' => 'required|boolean',
+            'deleted' => 'nullable|array',
+            'deleted.*' => 'required|integer|exists:statuses,id',
+        ]);
+
+        $inRoadmapCount = collect($request->statuses)->filter(function ($status) {
+            return $status['in_roadmap'] === true;
+        })->count();
+
+        if ($inRoadmapCount > 3) {
+            throw ValidationException::withMessages([
+                'statuses' => 'Only 3 statuses can be in the roadmap at a time.',
+            ]);
+        }
+
+        foreach ($request->statuses as $status) {
+            Status::find($status['id'])->update([
+                'name' => $status['name'],
+                'color' => $status['color'],
+                'in_roadmap' => $status['in_roadmap'],
+            ]);
+        }
+
+        Status::destroy($request->deleted);
+
+        return redirect()->back()->with('success', 'Statuses updated.');
+    }
+}
diff --git a/app/Http/Controllers/Frontend/HomeController.php b/app/Http/Controllers/Frontend/HomeController.php
index 6dfa6de..52723d6 100644
--- a/app/Http/Controllers/Frontend/HomeController.php
+++ b/app/Http/Controllers/Frontend/HomeController.php
@@ -16,7 +16,7 @@ public function index()
             ->orderBy('order')
             ->get();
         $statuses = Status::select('id', 'name', 'color')
-            ->whereIn('id', [2, 3, 4])
+            ->inRoadmap()
             ->get();
 
         $posts = Post::whereIn('status_id', $statuses->pluck('id'))
diff --git a/app/Http/Controllers/Frontend/PostController.php b/app/Http/Controllers/Frontend/PostController.php
index d982883..02844c4 100644
--- a/app/Http/Controllers/Frontend/PostController.php
+++ b/app/Http/Controllers/Frontend/PostController.php
@@ -12,7 +12,6 @@ class PostController extends Controller
 {
     public function show(Board $board, $post)
     {
-
         $post = Post::where('slug', $post)->withVote()->firstOrFail();
         $post->load('creator');
 
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index a05154e..e2da762 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -36,6 +36,8 @@ public function share(Request $request): array
             ],
             'appName' => config('app.name'),
             'appLogo' => config('app.logo'),
+            'success' => fn () => $request->session()->get('success'),
+            'error' => fn () => $request->session()->get('error'),
         ];
     }
 }
diff --git a/app/Models/Status.php b/app/Models/Status.php
index f15d90a..cf456ca 100644
--- a/app/Models/Status.php
+++ b/app/Models/Status.php
@@ -9,8 +9,8 @@ class Status extends Model
 {
     use HasFactory;
 
-    protected $fillable = ['name', 'color'];
-
+    protected $fillable = ['name', 'color', 'in_roadmap', 'order'];
+    protected $casts = ['in_roadmap' => 'boolean'];
     protected $hidden = ['created_at', 'updated_at'];
 
     public function posts()
@@ -22,4 +22,9 @@ public function post()
     {
         return $this->belongsTo(Post::class);
     }
+
+    public function scopeInRoadmap($query)
+    {
+        return $query->where('in_roadmap', 1);
+    }
 }
diff --git a/database/migrations/2024_01_06_123142_create_statuses_table.php b/database/migrations/2024_01_06_123142_create_statuses_table.php
index e54a0a8..0b803f5 100644
--- a/database/migrations/2024_01_06_123142_create_statuses_table.php
+++ b/database/migrations/2024_01_06_123142_create_statuses_table.php
@@ -15,6 +15,8 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->string('color');
+            $table->tinyInteger('order')->default(0);
+            $table->boolean('in_roadmap')->default(false);
             $table->timestamps();
         });
     }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 55882c7..01c9439 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -13,18 +13,17 @@ class DatabaseSeeder extends Seeder
      */
     public function run(): void
     {
-        // User::factory(10)->create();
+        \App\Models\User::factory()->create([
+            'name'     => 'Admin User',
+            'email'    => 'admin@example.com',
+            'password' => bcrypt('password'),
+            'role'     => 'admin',
+        ]);
 
         $this->call([
-            // StatusSeeder::class,
-            // BoardSeeder::class,
+            StatusSeeder::class,
+            BoardSeeder::class,
             PostSeeder::class,
         ]);
-
-
-        // \App\Models\User::factory()->create([
-        //     'name' => 'Test User',
-        //     'email' => 'test@example.com',
-        // ]);
     }
 }
diff --git a/database/seeders/StatusSeeder.php b/database/seeders/StatusSeeder.php
index 784945a..ac73c0f 100644
--- a/database/seeders/StatusSeeder.php
+++ b/database/seeders/StatusSeeder.php
@@ -14,18 +14,17 @@ class StatusSeeder extends Seeder
     public function run(): void
     {
         $statuses = [
-            ['name' => 'Under Review', 'color' => '#85b5b5'],
-            ['name' => 'Planned', 'color' => '#1fa0ff'],
-            ['name' => 'In Progress', 'color' => '#c17aff'],
-            ['name' => 'Complete', 'color' => '#6cd345'],
-            ['name' => 'Closed', 'color' => '#ed2b2b'],
+            ['name' => 'Under Review', 'color' => '#85b5b5', 'order' => 0],
+            ['name' => 'Planned', 'color' => '#1fa0ff', 'order' => 1, 'in_roadmap' => true],
+            ['name' => 'In Progress', 'color' => '#c17aff', 'order' => 2, 'in_roadmap' => true],
+            ['name' => 'Complete', 'color' => '#6cd345', 'order' => 3, 'in_roadmap' => true],
+            ['name' => 'Closed', 'color' => '#ed2b2b', 'order' => 4, 'in_roadmap' => false],
         ];
 
         foreach ($statuses as $status) {
             try {
                 Status::create($status);
             } catch (\Throwable $th) {
-
             }
         }
     }
diff --git a/package.json b/package.json
index 4cd64dd..4556e6a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
         "@tailwindcss/forms": "^0.5.3",
         "@types/node": "^18.13.0",
         "@types/react": "^18.0.28",
+        "@types/react-color": "^3.0.11",
         "@types/react-dom": "^18.0.10",
         "@vitejs/plugin-react": "^4.2.0",
         "autoprefixer": "^10.4.12",
@@ -25,7 +26,9 @@
     },
     "dependencies": {
         "@heroicons/react": "^2.1.1",
+        "@radix-ui/react-popover": "^1.0.7",
         "@wedevs/tail-react": "^0.3.3",
-        "classnames": "^2.5.1"
+        "classnames": "^2.5.1",
+        "react-color": "^2.19.3"
     }
-}
\ No newline at end of file
+}
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
index 4f7b6fd..8e20573 100644
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -1,20 +1,20 @@
-import { useState, PropsWithChildren, ReactNode } from 'react';
+import { useEffect, useState, PropsWithChildren, ReactNode } from 'react';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
 import { Link, usePage } from '@inertiajs/react';
 import { PageProps, User } from '@/types';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { Notice } from '@wedevs/tail-react';
 
 export default function Authenticated({
-  user,
   header,
   children,
-}: PropsWithChildren<{ user: User; header?: ReactNode }>) {
+}: PropsWithChildren<{ header?: ReactNode }>) {
   const [showingNavigationDropdown, setShowingNavigationDropdown] =
     useState(false);
 
-  const { appName, appLogo } = usePage<PageProps>().props;
+  const { auth, appName, appLogo, success, error } = usePage<PageProps>().props;
 
   return (
     <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
@@ -40,6 +40,13 @@ export default function Authenticated({
                 >
                   Dashboard
                 </NavLink>
+
+                <NavLink
+                  href={route('admin.statuses.index')}
+                  active={route().current('admin.statuses.index')}
+                >
+                  Status
+                </NavLink>
               </div>
             </div>
 
@@ -47,7 +54,7 @@ export default function Authenticated({
               <a
                 href={route('home')}
                 target="_blank"
-                className="text-sm inline-flex text-gray-600"
+                className="text-sm font-medium inline-flex text-gray-500 hover:text-gray-700"
               >
                 <span>Preview</span>
                 <ArrowTopRightOnSquareIcon className="h-5 w-5 ml-2" />
@@ -61,7 +68,7 @@ export default function Authenticated({
                         type="button"
                         className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
                       >
-                        {user.name}
+                        {auth.user.name}
 
                         <svg
                           className="ms-2 -me-0.5 h-4 w-4"
@@ -151,10 +158,10 @@ export default function Authenticated({
           <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
             <div className="px-4">
               <div className="font-medium text-base text-gray-800 dark:text-gray-200">
-                {user.name}
+                {auth.user.name}
               </div>
               <div className="font-medium text-sm text-gray-500">
-                {user.email}
+                {auth.user.email}
               </div>
             </div>
 
@@ -182,7 +189,20 @@ export default function Authenticated({
         </header>
       )}
 
-      <main>{children}</main>
+      <main className="max-w-7xl mx-auto sm:px-6 lg:px-8 py-12 ">
+        {error && (
+          <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <Notice type="error" label={error} className="mb-4" />
+          </div>
+        )}
+
+        {success && (
+          <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <Notice type="success" label={success} className="mb-4" />
+          </div>
+        )}
+        {children}
+      </main>
     </div>
   );
 }
diff --git a/resources/js/Pages/Admin/Dashboard.tsx b/resources/js/Pages/Admin/Dashboard.tsx
new file mode 100644
index 0000000..fe1f037
--- /dev/null
+++ b/resources/js/Pages/Admin/Dashboard.tsx
@@ -0,0 +1,30 @@
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import { Head } from '@inertiajs/react';
+import { PageProps } from '@/types';
+
+const Dashboard = ({ auth }: PageProps) => {
+  return (
+    <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <Head title="Dashboard" />
+
+      <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+        <div className="p-6 text-gray-900 dark:text-gray-100">
+          You're logged in!
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Dashboard.layout = (page: React.ReactNode) => (
+  <AuthenticatedLayout
+    children={page}
+    header={
+      <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+        Dashboard
+      </h2>
+    }
+  ></AuthenticatedLayout>
+);
+
+export default Dashboard;
diff --git a/resources/js/Pages/Admin/Status.tsx b/resources/js/Pages/Admin/Status.tsx
new file mode 100644
index 0000000..36eae1a
--- /dev/null
+++ b/resources/js/Pages/Admin/Status.tsx
@@ -0,0 +1,338 @@
+import React, { useEffect, useState } from 'react';
+import { Head, Link, useForm } from '@inertiajs/react';
+import { CirclePicker } from 'react-color';
+import * as Popover from '@radix-ui/react-popover';
+
+import { PageProps, StatusType } from '@/types';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import {
+  Button,
+  Modal,
+  ModalActions,
+  ModalBody,
+  ModalHeader,
+  SwitchInput,
+  TextField,
+} from '@wedevs/tail-react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import useSearchParams from '@/hooks/useSearchParams';
+
+type Props = {
+  statuses: StatusType[];
+};
+
+type ColorProps = {
+  color: string;
+  onChange: (color: string) => void;
+};
+
+const colorList = [
+  '#a50000',
+  '#cd4a12',
+  '#fd563d',
+  '#f0787a',
+  '#fa7d9b',
+  '#fd7f00',
+  '#f4ae27',
+  '#ff930a',
+  '#7c0088',
+  '#a60174',
+  '#c50a8b',
+  '#9a4fb9',
+  '#b118c6',
+  '#c17aff',
+  '#fd37f1',
+  '#ee82ff',
+  '#040077',
+  '#0063ae',
+  '#1e58ed',
+  '#6b69ff',
+  '#1fa0ff',
+  '#00c0fd',
+  '#81b1ff',
+  '#81c8c8',
+  '#436652',
+  '#00652a',
+  '#048944',
+  '#1e907a',
+  '#1cbc9c',
+  '#04c168',
+  '#6cd345',
+  '#00e4a1',
+];
+
+const StatusPage = ({ statuses }: Props) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const form = useForm<{
+    statuses: StatusType[];
+    deleted: number[];
+  }>({
+    statuses: statuses,
+    deleted: [],
+  });
+
+  useEffect(() => {
+    form.setData({
+      statuses: statuses,
+      deleted: [],
+    });
+  }, [statuses]);
+
+  const updateItem = (id: number, key: string, value: any) => {
+    form.setData(
+      'statuses',
+      form.data.statuses.map((status) => {
+        if (status.id === id) {
+          return {
+            ...status,
+            [key]: value,
+          };
+        }
+
+        return status;
+      })
+    );
+  };
+
+  const confirmDelete = (id: number) => {
+    if (confirm('Are you sure you want to delete this status?')) {
+      form.setData({
+        statuses: form.data.statuses.filter((status) => status.id !== id),
+        deleted: [...form.data.deleted, id],
+      });
+    }
+  };
+
+  const updateForm = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    form.put(route('admin.statuses.update'), {
+      preserveScroll: true,
+      onSuccess: () => {
+        //
+      },
+    });
+  };
+
+  const onClose = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <AuthenticatedLayout
+      header={
+        <div className="flex justify-between">
+          <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Statuses
+          </h2>
+
+          <Button
+            variant="primary"
+            className="inline-flex"
+            onClick={() => setIsModalOpen(true)}
+          >
+            <PlusIcon className="mr-2 h-5 w-5" aria-hidden="true" />
+            <span>Add Status</span>
+          </Button>
+        </div>
+      }
+    >
+      <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <Head title="Dashboard" />
+
+        <CreateModal isOpen={isModalOpen} onClose={onClose} />
+
+        <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+          <div className="flex gap-6 p-6 text-gray-900 dark:text-gray-100">
+            <div className="w-96 border-r pr-5 border-gray-100">
+              <h3 className="font-semibold mb-2">About Statuses</h3>
+              <p className="text-sm">
+                Statuses are the integral part of product roadmap. Only 3
+                statuses can be shown in the roadmap at a time.
+              </p>
+            </div>
+            <form onSubmit={updateForm} className="flex-1">
+              {form.data.statuses.map((status) => (
+                <div
+                  key={status.id}
+                  className="flex items-center justify-between mb-2"
+                >
+                  <div className="flex items-center">
+                    <div className="mr-2">
+                      <ColorPicker
+                        color={status.color}
+                        onChange={(color) =>
+                          updateItem(status.id, 'color', color)
+                        }
+                      />
+                    </div>
+                    <div>
+                      <span
+                        className="uppercase font-medium"
+                        style={{
+                          color: status.color,
+                        }}
+                      >
+                        <TextField
+                          value={status.name}
+                          wrapperClassName="mb-0"
+                          style={{
+                            color: status.color,
+                          }}
+                          onChange={(value) =>
+                            updateItem(status.id, 'name', value)
+                          }
+                        />
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="flex">
+                    <SwitchInput
+                      label="Show in Roadmap"
+                      initialValue={status.in_roadmap}
+                      onChange={(checked) =>
+                        updateItem(status.id, 'in_roadmap', checked)
+                      }
+                    />
+
+                    <Button
+                      variant="danger"
+                      style="outline"
+                      size="small"
+                      className="ml-3"
+                      onClick={() => confirmDelete(status.id)}
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                </div>
+              ))}
+
+              {form.errors.statuses && (
+                <div className="mt-4 text-right">
+                  <p className="text-red-600 text-sm">{form.errors.statuses}</p>
+                </div>
+              )}
+
+              <div className="text-right">
+                <Button
+                  className="mt-4"
+                  variant="primary"
+                  type="submit"
+                  loading={form.processing}
+                  disabled={form.processing}
+                >
+                  Save Changes
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </AuthenticatedLayout>
+  );
+};
+
+const ColorPicker = ({ color, onChange }: ColorProps) => {
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button className="IconButton" aria-label="Update dimensions">
+          <div
+            className="h-6 w-6 rounded-full"
+            style={{
+              backgroundColor: color,
+            }}
+          ></div>
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="bg-white px-4 py-4 rounded shadow z-20"
+          sideOffset={5}
+        >
+          <CirclePicker
+            color={color}
+            width="340px"
+            colors={colorList}
+            onChangeComplete={(color) => {
+              onChange(color.hex);
+            }}
+          />
+          <Popover.Arrow className="fill-gray-50" />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+type CreateModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const CreateModal = ({ isOpen, onClose }: CreateModalProps) => {
+  const form = useForm<{
+    name: string;
+    color: string;
+  }>({
+    name: '',
+    color: colorList[Math.floor(Math.random() * colorList.length)],
+  });
+
+  const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    form.post(route('admin.statuses.store'), {
+      preserveScroll: true,
+      onSuccess: () => {
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <form onSubmit={submitForm}>
+        <ModalHeader>Add Status</ModalHeader>
+        <ModalBody>
+          <div className="mb-4 w-full">
+            <div className="mb-2">
+              <label className="block text-sm font-medium leading-6 text-gray-900">
+                Choose Color
+              </label>
+            </div>
+
+            <ColorPicker
+              color={form.data.color}
+              onChange={(color) => form.setData('color', color)}
+            />
+          </div>
+          <TextField
+            label="Status Name"
+            placeholder="In Progress"
+            className="font-semibold"
+            value={form.data.name}
+            onChange={(value) => form.setData('name', value)}
+            style={{
+              color: form.data.color,
+            }}
+            error={form.errors.name}
+          />
+        </ModalBody>
+        <ModalActions>
+          <Button variant="primary" type="submit">
+            Create Status
+          </Button>
+          <Button variant="secondary" onClick={onClose} className="mr-2">
+            Cancel
+          </Button>
+        </ModalActions>
+      </form>
+    </Modal>
+  );
+};
+
+export default StatusPage;
diff --git a/resources/js/Pages/Dashboard.tsx b/resources/js/Pages/Dashboard.tsx
deleted file mode 100644
index 1a58ea5..0000000
--- a/resources/js/Pages/Dashboard.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import { Head } from '@inertiajs/react';
-import { PageProps } from '@/types';
-
-export default function Dashboard({ auth }: PageProps) {
-  return (
-    <AuthenticatedLayout
-      user={auth.user}
-      header={
-        <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-          Dashboard
-        </h2>
-      }
-    >
-      <Head title="Dashboard" />
-
-      <div className="py-12">
-        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-          <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-            <div className="p-6 text-gray-900 dark:text-gray-100">
-              You're logged in!
-            </div>
-          </div>
-        </div>
-      </div>
-    </AuthenticatedLayout>
-  );
-}
diff --git a/resources/js/Pages/Frontend/Board/PostForm.tsx b/resources/js/Pages/Frontend/Board/PostForm.tsx
index f1e1d49..843e76c 100644
--- a/resources/js/Pages/Frontend/Board/PostForm.tsx
+++ b/resources/js/Pages/Frontend/Board/PostForm.tsx
@@ -26,8 +26,6 @@ const PostForm = ({ board, user }: Props) => {
     });
   };
 
-  console.log(board.settings);
-
   return (
     <div className="w-72">
       <form
diff --git a/resources/js/hooks/useSearchParams.tsx b/resources/js/hooks/useSearchParams.tsx
new file mode 100644
index 0000000..5c3f84a
--- /dev/null
+++ b/resources/js/hooks/useSearchParams.tsx
@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const useSearchParams = () => {
+  const [searchParams, setSearchParams] = useState(
+    new URLSearchParams(window.location.search)
+  );
+
+  const updateSearchParam = useCallback(
+    (param: string, value: string | null | undefined) => {
+      const newSearchParams = new URLSearchParams(window.location.search);
+      if (value === null || value === undefined) {
+        newSearchParams.delete(param);
+      } else {
+        newSearchParams.set(param, value);
+      }
+      // Update the URL without reloading the page
+      window.history.pushState({}, '', '?' + newSearchParams.toString());
+      // Manually trigger a custom event
+      window.dispatchEvent(new Event('searchparamchange'));
+    },
+    []
+  );
+
+  useEffect(() => {
+    const handlePopState = () => {
+      setSearchParams(new URLSearchParams(window.location.search));
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    // Listen for the custom event
+    window.addEventListener('searchparamchange', handlePopState);
+
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+      window.removeEventListener('searchparamchange', handlePopState);
+    };
+  }, []);
+
+  return [searchParams, updateSearchParam];
+};
+
+export default useSearchParams;
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 585e823..183dc5b 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -15,12 +15,16 @@ export type PageProps<
   };
   appName: string;
   appLogo: string;
+  error: string;
+  success: string;
 };
 
 export interface StatusType {
   color: string;
   id: number;
   name: string;
+  in_roadmap: boolean;
+  order: number;
 }
 
 export interface BoardType {
diff --git a/routes/web.php b/routes/web.php
index 3db7e6f..f40f75d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,7 @@
 <?php
 
+use App\Http\Controllers\Admin\DashboardController;
+use App\Http\Controllers\Admin\StatusController;
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
@@ -24,15 +26,17 @@
     ->name('home');
 Route::get('/b/{board}', [BoardController::class, 'show'])
     ->name('board.show');
-Route::get('/b/{board}/p/{post}', [PostController::class, 'show'])
+Route::get('/b/{board}/{post}', [PostController::class, 'show'])
     ->name('post.show');
 Route::get('/p/{post}/comments', [CommentController::class, 'index'])->name('post.comments.index');
 
 // route group with 'admin' prefix
 Route::prefix('admin')->middleware('auth', 'verified', 'admin')->group(function () {
-    Route::get('/dashboard', function () {
-        return Inertia::render('Dashboard');
-    })->name('dashboard');
+    Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
+
+    Route::get('/statuses', [StatusController::class, 'index'])->name('admin.statuses.index');
+    Route::post('/statuses', [StatusController::class, 'store'])->name('admin.statuses.store');
+    Route::put('/statuses/update', [StatusController::class, 'update'])->name('admin.statuses.update');
 });
 
 Route::middleware('auth')->group(function () {
diff --git a/yarn.lock b/yarn.lock
index 28aa087..aa1dff7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -179,6 +179,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
+"@babel/runtime@^7.13.10":
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
+  integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -328,6 +335,33 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz#a5d300008960bb39677c46bf16f53ec70d8dee04"
   integrity sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==
 
+"@floating-ui/core@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a"
+  integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.5.4":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb"
+  integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==
+  dependencies:
+    "@floating-ui/core" "^1.5.3"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.0":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.5.tgz#851522899c34e3e2be1e29f3294f150834936e28"
+  integrity sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==
+  dependencies:
+    "@floating-ui/dom" "^1.5.4"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@headlessui/react@^1.4.2", "@headlessui/react@^1.7.16":
   version "1.7.17"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
@@ -340,6 +374,11 @@
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.1.1.tgz#422deb80c4d6caf3371aec6f4bee8361a354dc13"
   integrity sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@inertiajs/core@1.0.14":
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/@inertiajs/core/-/core-1.0.14.tgz#2b5f13b09141aa9b35bcabcdaeebb2b1d46e4465"
@@ -428,6 +467,197 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@radix-ui/primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-id@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-portal@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-slot@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@rollup/rollup-android-arm-eabi@4.9.4":
   version "4.9.4"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.4.tgz#b1094962742c1a0349587040bc06185e2a667c9b"
@@ -550,6 +780,14 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
   integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
 
+"@types/react-color@^3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.11.tgz#65992e9fdfef70b2db939a98ce3d6a8b8456ecae"
+  integrity sha512-20m5GpzmdqwmSdnPeMs4UPPUuvkS4ESwakL6u2YN1hbo+ajWiiTwGYIMGhdcJFGeoLyAsr7TVonbZrMhU3+pdw==
+  dependencies:
+    "@types/react" "*"
+    "@types/reactcss" "*"
+
 "@types/react-dom@^18.0.10":
   version "18.2.18"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
@@ -566,6 +804,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/reactcss@*":
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.11.tgz#bfeadb67a704b4dba24c6c58d3c0e5cf87a0cb1b"
+  integrity sha512-0fFy0ubuPlhksId8r9V8nsLcxBAPQnn15g/ERAElgE9L6rOquMj2CapsxqfyBuHlkp0/ndEUVnkYI7MkTtkGpw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/scheduler@*":
   version "0.16.8"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
@@ -641,6 +886,13 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -840,6 +1092,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -986,6 +1243,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -1052,6 +1314,13 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -1145,12 +1414,22 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
 
-loose-envify@^1.1.0:
+lodash@^4.0.1, lodash@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1169,6 +1448,11 @@ lru-cache@^5.1.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
   integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@@ -1250,7 +1534,7 @@ nprogress@^0.2.0:
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
   integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
 
-object-assign@^4.0.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -1356,6 +1640,15 @@ postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.32:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prop-types@^15.5.10:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -1373,6 +1666,19 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -1381,11 +1687,44 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -1393,6 +1732,13 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -1407,6 +1753,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 resolve@^1.1.7, resolve@^1.22.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
@@ -1504,6 +1855,7 @@ source-map-js@^1.0.2:
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1522,6 +1874,7 @@ string-width@^5.0.1, string-width@^5.1.2:
     strip-ansi "^7.0.1"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -1607,6 +1960,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+tinycolor2@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -1624,6 +1982,11 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
+tslib@^2.0.0, tslib@^2.1.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 typescript@^5.0.2:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
@@ -1642,6 +2005,21 @@ update-browserslist-db@^1.0.13:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.1.tgz#9be64c3902cbd72b07fe55e56408ae3a26036fd0"
+  integrity sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"