add: report problem page

src/app/[name]/layout.tsx

@@ -7,14 +7,17 @@ export const metadata = {
 
 export default function MenuLayout({
   children,
+  report
 }: Readonly<{
   children: React.ReactNode;
+  report: React.ReactNode,
 }>) {
 
   return (
     <ClientSideWrapper>
       <ClientMenuRouteWrapper>
         {children}
+        {report}
       </ClientMenuRouteWrapper>
     </ClientSideWrapper>
   );

src/app/[name]/report/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import Button from '@/components/button/PrimaryButton';
+import InputField from '@/components/input/InputField';
+import { ArrowLeft } from 'iconsax-react';
+import Image from 'next/image'
+import { useRouter } from 'next/navigation';
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type Props = object;
+
+function ReportIndex({ }: Props) {
+    const router = useRouter();
+
+    const { t } = useTranslation('parallels', {
+        keyPrefix: 'Report'
+    })
+
+    return (
+        <div className='w-full z-[100] px-6 py-6 absolute top-0 left-0 right-0 bottom-0 bg-background'>
+            <ArrowLeft
+                className='absolute top-6 left-6 cursor-pointer'
+                size='24'
+                color='currentColor'
+                onClick={() => { router.back() }}
+            />
+            <Image
+                className='place-self-center w-full px-4'
+                src={'/assets/images/report-hero.svg'}
+                height={200}
+                width={312}
+                unoptimized
+                alt='report hero image'
+            />
+            <div className='w-full px-4 mt-6'>
+                <h2 className='text-sm2 font-bold'>{t('Heading')}</h2>
+                <p className='text-sm2 text-disabled-text mt-2'>{t('Description')}</p>
+            </div>
+
+            <form>
+                <InputField
+                    className='w-full mt-6 px-4 bg-background'
+                    type='text'
+                    placeholder={t('InputTitle.Placeholder')}
+                    labelText={t('InputTitle.Label')}
+                    htmlFor='report-title'
+                    onChange={() => { }}
+                />
+
+                <div className='relative'>
+                    <textarea
+                        className='w-full px-4 py-2.5 mt-6 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none h-[200px] focus:ring-0'
+                        placeholder={t('InputDescription.Placeholder')}
+                        id='report-description'
+                        name='report-description'
+                    ></textarea>
+                    <span className='absolute top-4 right-2 px-2 bg-background text-foreground text-xs'>
+                        {t('InputDescription.Label')}
+                    </span>
+                </div>
+
+                <Button
+                    className='w-full px-4 mt-6'
+                    type='submit'
+                    onClick={() => { }}
+                >
+                    {t('ButtonSubmit')}
+                </Button>
+            </form>
+        </div>
+    )
+}
+
+export default ReportIndex

src/app/globals.css

@@ -88,6 +88,23 @@ input[type="password"] {
   background: #555;
 }
 
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
+  box-shadow: 0 0 0px 0px transparent inset !important;
+  -webkit-text-fill-color: #000 !important;
+  background: currentColor !important;
+  transition: background-color 10000s ease-in-out 0s;
+}
+
+input:autofill {
+  -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
+  box-shadow: 0 0 0px 0px transparent inset !important;
+  -webkit-text-fill-color: #000 !important;
+  background: currentColor !important;
+  transition: background-color 10000s ease-in-out 0s;
+}
+
+
 .box-shadow-normal {
   box-shadow: 0px 2px 16px 0px #00000014;
 }

src/app/layout.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
   description: 'Webapp dashboard',
 }
 
-const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating", "chat", "notifications"];
+const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];
 
 export default async function RootLayout({
   children,