viewport change

client/src/app/(auth)/signin/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import Signin from "@/components/forms/signin";
 
 export const metadata: Metadata = {
   title: "Sign in | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function SigninPage() {

client/src/app/(auth)/signup/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import Signup from "@/components/forms/signup";
 
 export const metadata: Metadata = {
   title: "Sign up | Caribbean Climate smart map",
   description: "Caribbean Climate smart map",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function SignupPage() {

client/src/app/(dashboard)/dashboard/(profile)/[[...id]]/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import DashboardContent from "@/containers/dashboard";
 
 export const metadata: Metadata = {
   title: "Dashboard | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function DashboardPage() {

client/src/app/(dashboard)/dashboard/collaborators/[[...id]]/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import CollaboratorsForm from "@/containers/collaborators/form";
 
 export const metadata: Metadata = {
   title: "Create new collaborator | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function CollaboratorPage() {

client/src/app/(dashboard)/dashboard/datasets/changes-to-approve/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import Link from "next/link";
 
@@ -28,7 +28,11 @@ import {
 export const metadata: Metadata = {
   title: "Changes to approve | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default async function ChangesToApprovePage({ params }: { params: { id: number } }) {

client/src/app/(dashboard)/dashboard/datasets/edit/[id]/page.tsx

@@ -1,5 +1,4 @@
-import { Metadata } from "next";
-
+import { Metadata, Viewport } from "next";
 import Link from "next/link";
 
 import { Hydrate, dehydrate } from "@tanstack/react-query";
@@ -23,7 +22,11 @@ import {
 export const metadata: Metadata = {
   title: "Edit dataset form | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default async function EditDatasetPage({ params }: { params: { id: number } }) {

client/src/app/(dashboard)/dashboard/datasets/new/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import Link from "next/link";
 
@@ -16,7 +16,11 @@ import {
 export const metadata: Metadata = {
   title: "New dataset form | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function NewDatasetPage() {

client/src/app/(dashboard)/dashboard/other-tools/[[...id]]/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import ToolForm from "@/containers/other-tools/form";
 
 export const metadata: Metadata = {
   title: "Create / edit a tool | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function OtherToolsFormPage() {

client/src/app/(dashboard)/dashboard/projects/[[...id]]/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import ProjectForm from "@/containers/projects/form";
 
 export const metadata: Metadata = {
   title: "Create / edit a project | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function NewProjectsPage() {

client/src/app/(password)/reset-password/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import ResetPassword from "@/components/forms/reset-password";
 
 export const metadata: Metadata = {
   title: "Reset Password | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function ResetPasswordPage() {

client/src/app/(password)/update-password/page.tsx

@@ -1,11 +1,15 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 
 import PasswordUpdate from "@/components/forms/password-update";
 
 export const metadata: Metadata = {
   title: "Update Password | Caribbean Climate smart map",
   description: "Generated by create next app",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default function UpdatePasswordPage() {

client/src/app/layout.tsx

@@ -6,7 +6,7 @@ import { PropsWithChildren } from "react";
 
 import { ToastContainer } from "react-toastify";
 
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { Hydrate, dehydrate } from "@tanstack/react-query";
@@ -29,7 +29,11 @@ import LayoutProviders from "./layout-providers";
 export const metadata: Metadata = {
   title: { template: "%s | CCSA", default: "CCSA" },
   description: "Caribbean Climate smart map",
-  viewport: "width=1000, initial-scale=1",
+};
+
+export const viewport: Viewport = {
+  width: 1000,
+  initialScale: 1,
 };
 
 export default async function RootLayout({ children }: PropsWithChildren) {

client/src/components/forms/dataset/colors.tsx

@@ -333,7 +333,7 @@ export default function DatasetColorsForm({
                               ),
                             })}
                             onChange={(e) => {
-                              return field.onChange(e.target.value);
+                              return field.onChange(e?.target?.value);
                             }}
                             disabled={status === "declined" && ME_DATA?.role?.type !== "admin"}
                           />