Updated - React email

- set all components to "use client"

Fix production build

Added sharp npm form image - it was recommended

fix some types

Updated Dockerfile

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:18-alpine AS deps
+FROM node:20.9.0-alpine AS deps
 
 WORKDIR /app
 COPY package*.json ./
 RUN npm install 
 
-FROM node:18-alpine AS BUILD_IMAGE
+FROM node:20.9.0-alpine AS BUILD_IMAGE
 
 WORKDIR /app
 
@@ -15,7 +15,7 @@ RUN npm run build
 RUN rm -rf node_modules
 RUN npm install 
 
-FROM node:18-alpine
+FROM node:20.9.0-alpine
 
 ENV NODE_ENV production
 
@@ -27,12 +27,15 @@ COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/package.json /app/package-loc
 COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/node_modules ./node_modules
 COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/public ./public
 COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/.next ./.next
-COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/.env.local ./.env.local
+
+# Copy .env and .env.local to the final image
+COPY --from=deps --chown=nextjs:nodejs /app/.env ./.env
+COPY --from=deps --chown=nextjs:nodejs /app/.env.local ./.env.local
 
 USER nextjs
 
 EXPOSE 3000
 
 CMD [ "npm", "start" ]
 
-#docker build --build-arg ENV_FILE=.env -t myimage .
+#docker build --build-arg ENV_FILE=.env -t myimage .

actions/crm/get-opportunities.ts

@@ -37,7 +37,7 @@ export const getOpportunitiesByMonth = async () => {
     {}
   );
 
-  const chartData = Object.keys(opportunitiesByMonth).map((month) => {
+  const chartData = Object.keys(opportunitiesByMonth).map((month: any) => {
     return {
       name: month,
       Number: opportunitiesByMonth[month],
@@ -73,7 +73,7 @@ export const getOpportunitiesByStage = async () => {
     {}
   );
 
-  const chartData = Object.keys(opportunitiesByStage).map((stage) => {
+  const chartData = Object.keys(opportunitiesByStage).map((stage: any) => {
     return {
       name: stage,
       Number: opportunitiesByStage[stage],

actions/get-notions.ts

@@ -83,7 +83,7 @@ export const getNotions = async (): Promise<any[] | null> => {
       });
 
     const notionItems = databases.map(
-      (item) =>
+      (item:any) =>
         ({
           id: item.id,
           createdAt: moment(item.created_time).format("YYYY-MM-DD"),

actions/get-users.ts

@@ -43,7 +43,7 @@ export const getUsersByMonth = async () => {
     return acc;
   }, {});
 
-  const chartData = Object.keys(usersByMonth).map((month) => {
+  const chartData = Object.keys(usersByMonth).map((month: any) => {
     return {
       name: month,
       Number: usersByMonth[month],

actions/projects/get-tasks.ts

@@ -35,7 +35,7 @@ export const getTasks = async () => {
   //Filtering tasks by section and board
   const sections = await prismadb.sections.findMany({
     where: {
-      OR: boards.map((board:any) => {
+      OR: boards.map((board: any) => {
         return {
           board: board.id,
         };
@@ -45,7 +45,7 @@ export const getTasks = async () => {
 
   const data = await prismadb.tasks.findMany({
     where: {
-      OR: sections.map((section:any) => {
+      OR: sections.map((section: any) => {
         return {
           section: section.id,
         };
@@ -84,7 +84,7 @@ export const getTasksByMonth = async () => {
     return acc;
   }, {});
 
-  const chartData = Object.keys(tasksByMonth).map((month) => {
+  const chartData = Object.keys(tasksByMonth).map((month: any) => {
     return {
       name: month,
       Number: tasksByMonth[month],

app/[locale]/(auth)/pending/page.tsx

@@ -5,9 +5,10 @@ import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import TryAgain from "./components/TryAgain";
+import { Users } from "@prisma/client";
 
 const PendingPage = async () => {
-  const adminUsers = await prismadb.users.findMany({
+  const adminUsers: Users[] = await prismadb.users.findMany({
     where: {
       is_admin: true,
       userStatus: "ACTIVE",
@@ -39,7 +40,7 @@ const PendingPage = async () => {
       <div className="flex flex-col justify-center ">
         <h2 className="flex justify-center text-xl">Admin List</h2>
         {adminUsers &&
-          adminUsers?.map((user) => (
+          adminUsers?.map((user: Users) => (
             <div
               key={user.id}
               className="flex flex-col p-5 m-2 gap-3 border rounded-md"

app/[locale]/(auth)/register/components/RegisterComponent.tsx

@@ -223,11 +223,13 @@ export function RegisterComponent() {
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent className="flex overflow-y-auto h-56">
-                        {["en", "de", "cz"].map((lng, index) => (
-                          <SelectItem key={index} value={lng}>
-                            {t("locale", { locale: lng })}
-                          </SelectItem>
-                        ))}
+                        {["en", "de", "cz"].map(
+                          (lng: string, index: number) => (
+                            <SelectItem key={index} value={lng}>
+                              {t("locale", { locale: lng })}
+                            </SelectItem>
+                          )
+                        )}
                       </SelectContent>
                     </Select>
                     <FormMessage />

app/[locale]/(routes)/admin/_components/GptCard.tsx

@@ -10,9 +10,10 @@ import { prismadb } from "@/lib/prisma";
 import SetGptModel from "../forms/SetGptModel";
 
 import OnTestButton from "./OnTestButton";
+import { gpt_models } from "@prisma/client";
 
 const GptCard = async () => {
-  const gptModels = await prismadb.gpt_models.findMany();
+  const gptModels: gpt_models[] = await prismadb.gpt_models.findMany();
   //console.log(gptModels, "gptModels");
 
   return (
@@ -24,8 +25,8 @@ const GptCard = async () => {
           {
             //filter in gptModels where status = ACTIVE
             gptModels
-              .filter((model) => model.status === "ACTIVE")
-              .map((model) => model.model)
+              .filter((model: gpt_models) => model.status === "ACTIVE")
+              .map((model: gpt_models) => model.model)
           }
         </CardDescription>
       </CardHeader>

app/[locale]/(routes)/admin/forms/SetGptModel.tsx

@@ -25,11 +25,17 @@ import {
 import { toast } from "@/components/ui/use-toast";
 import updateModel from "@/actions/admin/update-gpt-model";
 import { useRouter } from "next/navigation";
+import { gpt_models } from "@prisma/client";
 
 const FormSchema = z.object({
   model: z.string().min(10).max(30),
 });
 
+type Model = {
+  id: string;
+  model: string;
+};
+
 const SetGptModel = ({ models }: any) => {
   const router = useRouter();
 
@@ -70,7 +76,7 @@ const SetGptModel = ({ models }: any) => {
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  {models.map((model: any) => (
+                  {models.map((model: Model) => (
                     <SelectItem key={model.id} value={model.id}>
                       {model.model}
                     </SelectItem>

emails/DemoTemplate.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 interface EmailTemplateProps {

emails/InviteUser.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   Body,
   Button,
@@ -84,8 +85,6 @@ export const InviteUserEmail = ({
 
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
                 className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center"
                 href={process.env.NEXT_PUBLIC_APP_URL}
               >

emails/NewTaskComment.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Body,
   Button,
@@ -77,8 +79,6 @@ export const NewTaskCommentEmail = ({
             </Text>
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
                 className="bg-black text-[#ffffff] rounded text-[12px] font-semibold no-underline text-center"
                 href={`${process.env.NEXT_PUBLIC_APP_URL}/projects/tasks/viewtask/${taskId}`}
               >

emails/NewTaskFromCRM.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   Body,
   Button,
@@ -71,8 +72,6 @@ export const NewTaskFromCRMEmail = ({
             </Text>
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
                 className="bg-black text-[#ffffff] rounded text-[12px] font-semibold no-underline text-center"
                 href={`${process.env.NEXT_PUBLIC_APP_URL}/projects/tasks/viewtask/${taskData.id}`}
               >

emails/NewTaskFromCRMToWatchers.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   Body,
   Button,
@@ -71,8 +72,6 @@ export const NewTaskFromCRMToWatchersEmail = ({
             </Text>
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
                 className="bg-black text-[#ffffff] rounded text-[12px] font-semibold no-underline text-center"
                 href={`${process.env.NEXT_PUBLIC_APP_URL}/crm/tasks/viewtask/${taskData.id}`}
               >

emails/NewTaskFromProject.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   Body,
   Button,
@@ -73,8 +74,6 @@ export const NewTaskFromProject = ({
             </Text>
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
                 className="bg-black text-[#ffffff] rounded text-[12px] font-semibold no-underline text-center"
                 href={`${process.env.NEXT_PUBLIC_APP_URL}/projects/tasks/viewtask/${taskData.id}`}
               >

emails/PasswordReset.tsx

@@ -1,16 +1,14 @@
+"use client";
 import {
   Body,
-  Button,
   Container,
-  Column,
   Head,
   Heading,
   Hr,
   Html,
   Img,
   Link,
   Preview,
-  Row,
   Section,
   Tailwind,
   Text,