remove dashboard filter disclousere

app/javascript/pages/dashboard/Filters.tsx

@@ -1,12 +1,12 @@
-import React, {FC, Fragment} from 'react'
-import {Disclosure, Transition} from "@headlessui/react"
-import {ChevronDownIcon, XIcon} from "@heroicons/react/outline"
-import {useForm} from "react-hook-form"
+import React, { FC, Fragment } from 'react'
+import { Disclosure, Transition } from "@headlessui/react"
+import { ChevronDownIcon, XIcon } from "@heroicons/react/outline"
+import { useForm } from "react-hook-form"
 
-import {QuestionWhereInput} from "../../__generated__/graphql-schema"
-import {useDashboardContext, whereDefaultState} from "./DashboardContext"
-import {useCurrentUser} from "../../contexts"
-import {Button, Input} from "../../components"
+import { QuestionWhereInput } from "../../__generated__/graphql-schema"
+import { useDashboardContext, whereDefaultState } from "./DashboardContext"
+import { useCurrentUser } from "../../contexts"
+import { Button, Input } from "../../components"
 
 type FilterBarForm = {
   fromOtherUsers?: boolean
@@ -36,12 +36,12 @@ const mapFilter = (values: FilterBarForm, userId?: string): QuestionWhereInput =
 })
 
 const FiltersForm: FC = () => {
-  const {register, handleSubmit, reset, getValues, formState} = useForm({
+  const { register, handleSubmit, reset, getValues, formState } = useForm({
     defaultValues: formDefaultValues,
   })
-  const {setWhere} = useDashboardContext()
+  const { setWhere } = useDashboardContext()
   const userContext = useCurrentUser()
-  const {user, isOnlyTeacher} = userContext
+  const { user, isOnlyTeacher } = userContext
 
   const onSubmit = (values: FilterBarForm) => {
     reset(getValues())
@@ -64,7 +64,7 @@ const FiltersForm: FC = () => {
           <Input
             type="date"
             placeholder="createDate.startAt"
-              {...register('createDate.startAt',{
+            {...register('createDate.startAt', {
               maxLength: 10,
               minLength: 10,
             })}
@@ -101,7 +101,7 @@ const FiltersForm: FC = () => {
         <div>
           <Button type={'tertiary'} onClick={handleClean}>
             <span className={"flex"}>
-              <XIcon className={"w-5 h-5 text-gray-800"}/>
+              <XIcon className={"w-5 h-5 text-gray-800"} />
               Limpar filtro
             </span>
           </Button>
@@ -117,35 +117,7 @@ const FiltersForm: FC = () => {
 }
 
 export const Filters: FC = () => (
-  <Disclosure>
-    {({open}) => (
-      <div className="m-auto bg-white rounded-md shadow-sm hover:shadow transition-shadow duration-300">
-        <Disclosure.Button as={Fragment}>
-          <button className="flex p-2 w-full justify-between">
-            <div className="grid place-items-center pl-4">
-              Filtros
+  <div className="p-4 m-auto bg-white rounded-md shadow-sm hover:shadow transition-shadow duration-300">
+    <FiltersForm />
   </div>
-            <div className={"pr-4"}>
-              <ChevronDownIcon
-                className={`${open ? 'transform rotate-180' : ''} w-5 h-5 text-gray-800`}
-              />
-            </div>
-          </button>
-        </Disclosure.Button>
-        <Transition
-          show={open}
-          enter="transition duration-100 ease-out"
-          enterFrom="transform scale-95 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-95 opacity-0"
-        >
-          <Disclosure.Panel className={"p-4"}>
-            <FiltersForm/>
-          </Disclosure.Panel>
-        </Transition>
-      </div>
-    )}
-  </Disclosure>
 )

app/javascript/pages/dashboard/components/charts/Pie.tsx

@@ -13,8 +13,8 @@ type Props = {
 export const Pie: FC<Props> = ({title, data}) => {
   return (
     <div
-      className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300"
-      style={{ height: '36rem', width: '36rem' }}
+      className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300 w-full"
+      style={{ height: '36rem' }}
     >
       <h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
       {data.length ? (