Merge branch 'main' into feature/AYS-396/add-eslint-rules

Author: sanshigo345

src/app/(private)/admin-registration-applications/[id]/page.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { FormSchema } from '@/modules/adminRegistrationApplications/constants/formValidationSchema'
+import { FormValidationSchema } from '@/modules/adminRegistrationApplications/constants/formValidationSchema'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { useTranslation } from 'react-i18next'
 import { LoadingSpinner } from '@/components/ui/loadingSpinner'
@@ -35,7 +35,7 @@ const Page = ({ params }: { params: { slug: string; id: string } }) => {
   const { t } = useTranslation()
   const { toast } = useToast()
   const form = useForm({
-    resolver: zodResolver(FormSchema),
+    resolver: zodResolver(FormValidationSchema),
   })
   const { control } = form
 
@@ -61,11 +61,13 @@ const Page = ({ params }: { params: { slug: string; id: string } }) => {
         .finally(() => setIsLoading(false))
     }
 
+
     fetchDetails()
   }, [params.id, t, toast])
 
+
   return (
-    // <PrivateRoute requiredPermissions={[Permission.APPLICATION_DETAIL]}>
+    <PrivateRoute requiredPermissions={[Permission.APPLICATION_DETAIL]}>
     <div className="p-6 bg-white dark:bg-gray-800 rounded-md shadow-md text-black dark:text-white">
       {isLoading && <LoadingSpinner />}
       {!isLoading && adminRegistrationApplicationDetails && (
@@ -170,7 +172,7 @@ const Page = ({ params }: { params: { slug: string; id: string } }) => {
                     name="institutionName"
                     render={({ field }) => (
                       <FormItem className="sm:col-span-1">
-                        <FormLabel>{t('institution')}</FormLabel>
+                        <FormLabel>{t('institutionName')}</FormLabel>
                         <FormControl>
                           <Input
                             {...field}
@@ -437,7 +439,7 @@ const Page = ({ params }: { params: { slug: string; id: string } }) => {
         </Form>
       )}
     </div>
-    // </PrivateRoute>
+    </PrivateRoute>
   )
 }
 

src/app/(private)/admin-registration-applications/page.tsx

@@ -14,6 +14,8 @@ import { useDataTable } from '@/app/hocs/useDataTable'
 import * as z from 'zod'
 import { DataTable, DataTableToolbar } from '@/components/dataTable'
 import filterFields from '@/modules/adminRegistrationApplications/constants/filterFields'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
 
 interface AdminRegistrationState {
   content: any[]
@@ -76,6 +78,12 @@ const Page = () => {
     <PrivateRoute requiredPermissions={[Permission.APPLICATION_LIST]}>
       <div className="space-y-1">
         {error && <Toaster />}
+        <div className={'float-right'}>
+          <Link href={'/admin-registration-applications/pre-application'}>
+            <Button>{t('preApplication')}</Button>
+          </Link>
+        </div>
+
         <DataTable
           className=""
           table={table}

src/app/(private)/admin-registration-applications/pre-application/page.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { useTranslation } from 'react-i18next'
+import Title from '@/components/ui/title'
+import { Textarea } from '@/components/ui/textarea'
+import { useEffect, useState } from 'react'
+import {
+  approveAdminRegistrationApplication,
+  getPreApplicationSummary,
+} from '@/modules/adminRegistrationApplications/service'
+import { useToast } from '@/components/ui/use-toast'
+import { LoadingSpinner } from '@/components/ui/loadingSpinner'
+import { Card } from '@/components/ui/card'
+import PrivateRoute from '@/app/hocs/isAuth'
+import { Permission } from '@/constants/permissions'
+import { useRouter } from 'next/navigation'
+import { PreApplicationFormSchema } from '@/modules/adminRegistrationApplications/constants/formValidationSchema'
+
+const Page = () => {
+  const { t } = useTranslation()
+  const { toast } = useToast()
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(true)
+  const [institutionSummary, setInstitutionSummary] = useState<any>(null)
+
+  const form = useForm<z.infer<typeof PreApplicationFormSchema>>({
+    resolver: zodResolver(PreApplicationFormSchema),
+    defaultValues: {
+      institutionId: '',
+      reason: '',
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof PreApplicationFormSchema>) {
+    setIsLoading(true)
+    approveAdminRegistrationApplication(values)
+      .then(() => {
+        toast({
+          title: t('success'),
+          description: t('preApplicationSuccess'),
+        })
+        router.push('/admin-registration-applications')
+      })
+      .catch(() => {
+        toast({
+          title: t('error'),
+          description: t('preApplicationError'),
+          variant: 'destructive',
+        })
+      })
+      .finally(() => setIsLoading(false))
+  }
+
+  useEffect(() => {
+    getPreApplicationSummary()
+      .then((response) => {
+        setInstitutionSummary(response.data.response)
+      })
+      .catch(() => {
+        toast({
+          title: t('error'),
+          description: t('defaultError'),
+          variant: 'destructive',
+        })
+      })
+      .finally(() => setIsLoading(false))
+  }, [t, toast])
+
+  return (
+    <PrivateRoute requiredPermissions={[Permission.APPLICATION_CREATE]}>
+      <div className="p-6 bg-white dark:bg-gray-800 rounded-md shadow-md text-black dark:text-white">
+        <Title title={t('preApplicationTitle')} />
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <Card className="p-6 w-full">
+              <div className="grid grid-cols-3 gap-y-6 sm:grid-cols-3 sm:gap-x-6">
+                <FormField
+                  control={form.control}
+                  name="institutionId"
+                  render={({ field }) => (
+                    <>
+                      <FormItem className="col-span-1">
+                        <FormLabel>{t('institution')}</FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={field.onChange}
+                            defaultValue={field.value}
+                          >
+                            <SelectTrigger>
+                              <SelectValue
+                                placeholder={t('selectInstitution')}
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {institutionSummary?.map((item: any) => (
+                                <SelectItem key={item.id} value={item.id}>
+                                  {item.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    </>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="reason"
+                  render={({ field }) => (
+                    <>
+                      <FormItem className="col-span-2">
+                        <FormLabel>{t('createReason')}</FormLabel>
+                        <FormControl>
+                          <Textarea minLength={40} maxLength={512} {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    </>
+                  )}
+                />
+              </div>
+            </Card>
+            <Button disabled={isLoading} type="submit" className={'min-w-20'}>
+              {isLoading ? <LoadingSpinner /> : t('create')}
+            </Button>
+          </form>
+        </Form>
+      </div>
+    </PrivateRoute>
+  )
+}
+
+export default Page

src/components/ui/input.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+import * as React from 'react'
 
+import { cn } from '@/lib/utils'
 import { cn } from '@/lib/utils'
 
 export interface InputProps
@@ -18,8 +20,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {...props}
       />
     )
-  }
+  },
 )
 Input.displayName = 'Input'
+Input.displayName = 'Input'
 
 export { Input }

src/components/ui/select.tsx

@@ -1,9 +1,14 @@
 'use client'
+'use client'
 
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 
+import { cn } from '@/lib/utils'
 import { cn } from '@/lib/utils'
 
 const Select = SelectPrimitive.Root
@@ -70,6 +75,7 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
 >(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
@@ -106,6 +112,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     {...props}
   />
 ))
@@ -141,6 +148,7 @@ const SelectSeparator = React.forwardRef<
   <SelectPrimitive.Separator
     ref={ref}
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ))

src/components/ui/textarea.tsx

@@ -0,0 +1,110 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { useImperativeHandle } from 'react'
+
+interface UseAutosizeTextAreaProps {
+  textAreaRef: HTMLTextAreaElement | null
+  minHeight?: number
+  maxHeight?: number
+  triggerAutoSize: string
+}
+
+export const useAutosizeTextArea = ({
+  textAreaRef,
+  triggerAutoSize,
+  maxHeight = Number.MAX_SAFE_INTEGER,
+  minHeight = 0,
+}: UseAutosizeTextAreaProps) => {
+  const [init, setInit] = React.useState(true)
+  React.useEffect(() => {
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+    const offsetBorder = 2
+    if (textAreaRef) {
+      if (init) {
+        textAreaRef.style.minHeight = `${minHeight + offsetBorder}px`
+        if (maxHeight > minHeight) {
+          textAreaRef.style.maxHeight = `${maxHeight}px`
+        }
+        setInit(false)
+      }
+      textAreaRef.style.height = `${minHeight + offsetBorder}px`
+      const scrollHeight = textAreaRef.scrollHeight
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      if (scrollHeight > maxHeight) {
+        textAreaRef.style.height = `${maxHeight}px`
+      } else {
+        textAreaRef.style.height = `${scrollHeight + offsetBorder}px`
+      }
+    }
+  }, [textAreaRef, triggerAutoSize, maxHeight, minHeight, init])
+}
+
+export type AutosizeTextAreaRef = {
+  textArea: HTMLTextAreaElement
+  maxHeight: number
+  minHeight: number
+}
+
+type AutosizeTextAreaProps = {
+  maxHeight?: number
+  minHeight?: number
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const AutosizeTextarea = React.forwardRef<
+  AutosizeTextAreaRef,
+  AutosizeTextAreaProps
+>(
+  (
+    {
+      maxHeight = Number.MAX_SAFE_INTEGER,
+      minHeight = 52,
+      className,
+      onChange,
+      value,
+      ...props
+    }: AutosizeTextAreaProps,
+    ref: React.Ref<AutosizeTextAreaRef>,
+  ) => {
+    const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null)
+    const [triggerAutoSize, setTriggerAutoSize] = React.useState('')
+
+    useAutosizeTextArea({
+      textAreaRef: textAreaRef.current,
+      triggerAutoSize: triggerAutoSize,
+      maxHeight,
+      minHeight,
+    })
+
+    useImperativeHandle(ref, () => ({
+      textArea: textAreaRef.current as HTMLTextAreaElement,
+      focus: () => textAreaRef.current?.focus(),
+      maxHeight,
+      minHeight,
+    }))
+
+    React.useEffect(() => {
+      setTriggerAutoSize(value as string)
+    }, [props?.defaultValue, value])
+
+    return (
+      <textarea
+        {...props}
+        value={value}
+        ref={textAreaRef}
+        className={cn(
+          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        onChange={(e) => {
+          setTriggerAutoSize(e.target.value)
+          onChange?.(e)
+        }}
+      />
+    )
+  },
+)
+AutosizeTextarea.displayName = 'AutosizeTextarea'
+
+export { AutosizeTextarea as Textarea }