Update - Projects

- added dueDateAt field in all create tasks dialogs

Update - CRM - Opportunites
- added budget value to data-table views
- updated tasks routes

app/[locale]/(auth)/layout.tsx

@@ -1,14 +1,15 @@
-import Footer from "@/app/[locale]/(routes)/components/Footer";
-import "@/app/[locale]/globals.css";
-import { ThemeToggle } from "@/components/ThemeToggle";
 import axios from "axios";
-import { GithubIcon, Star } from "lucide-react";
-import { createTranslator } from "next-intl";
-import { notFound } from "next/navigation";
 import Link from "next/link";
+import { notFound } from "next/navigation";
+import { createTranslator } from "next-intl";
+import { GithubIcon, Star } from "lucide-react";
+
+import "@/app/[locale]/globals.css";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import Footer from "@/app/[locale]/(routes)/components/Footer";
 
 type Props = {
-  params: {locale: string};
+  params: { locale: string };
 };
 
 async function getLocales(locale: string) {
@@ -19,20 +20,17 @@ async function getLocales(locale: string) {
   }
 }
 
-export async function generateMetadata({params: {locale}}: Props) {
+export async function generateMetadata({ params: { locale } }: Props) {
   const messages = await getLocales(locale);
-
-  const t = createTranslator({locale, messages});
-
+  const t = createTranslator({ locale, messages });
   return {
-    title: t('RootLayout.title'),
-    description: t('RootLayout.description')
+    title: t("RootLayout.title"),
+    description: t("RootLayout.description"),
   };
 }
 
 const AuthLayout = async ({ children }: { children: React.ReactNode }) => {
   //Get github stars from github api
-
   const github = await axios
     .get(`https://api.github.com/repos/pdovhomilja/nextcrm-app`)
     .then((res) => res.data);

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

@@ -1,29 +1,24 @@
 "use client";
-
-import React, { startTransition, useCallback } from "react";
-import { z, ZodType } from "zod";
-import { signIn } from "next-auth/react";
+import { z } from "zod";
+import axios from "axios";
 import Link from "next/link";
-import { useRouter } from "next-intl/client";
-//import { toast } from "react-hot-toast";
-import { useToast } from "@/components/ui/use-toast";
-
+import { signIn } from "next-auth/react";
 import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import axios from "axios";
+import { useRouter } from "next-intl/client";
+import React, { startTransition } from "react";
 import { FingerprintIcon } from "lucide-react";
+import { usePathname } from "next-intl/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useLocale, useTranslations } from "next-intl";
 
-import { Icons } from "@/components/ui/icons";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
+  CardDescription,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import {
   Form,
   FormControl,
@@ -39,9 +34,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-
-import { useLocale, useTranslations } from "next-intl";
-import { usePathname } from "next-intl/client";
+import { Icons } from "@/components/ui/icons";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 
 export function RegisterComponent() {
   const router = useRouter();
@@ -108,22 +104,22 @@ export function RegisterComponent() {
     }
   };
 
-  const t = useTranslations('RegisterComponent');
+  const t = useTranslations("RegisterComponent");
   const locale = useLocale();
   const pathname = usePathname();
 
-  function onValueChange( value: string ) {
+  function onValueChange(value: string) {
     const nextLocale = value;
     startTransition(() => {
-      router.replace(pathname, {locale: nextLocale});
+      router.replace(pathname, { locale: nextLocale });
     });
   }
 
   return (
     <Card className="shadow-lg ">
       <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl">{t('cardTitle')}</CardTitle>
-        <CardDescription>{t('cardDescription')}</CardDescription>
+        <CardTitle className="text-2xl">{t("cardTitle")}</CardTitle>
+        <CardDescription>{t("cardDescription")}</CardDescription>
       </CardHeader>
       <CardContent className="grid gap-4 overflow-auto">
         <div className="grid grid-cols-2 gap-6">
@@ -209,7 +205,7 @@ export function RegisterComponent() {
                 name="language"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('label')}</FormLabel>
+                    <FormLabel>{t("label")}</FormLabel>
                     <Select
                       disabled={isLoading}
                       onValueChange={onValueChange}
@@ -224,9 +220,9 @@ export function RegisterComponent() {
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        {['en', 'de', 'cz'].map((cur) => (
+                        {["en", "de", "cz"].map((cur) => (
                           <SelectItem key={cur} value={cur}>
-                            {t('locale', {locale: cur})}
+                            {t("locale", { locale: cur })}
                           </SelectItem>
                         ))}
                       </SelectContent>

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

@@ -1,8 +1,6 @@
 import { RegisterComponent } from "./components/RegisterComponent";
 
-type Props = {};
-
-const RegistrPage = (props: Props) => {
+const RegisterPage = () => {
   return (
     <div className="flex flex-col w-full h-full overflow-auto p-10 space-y-5">
       <div className="">
@@ -15,4 +13,4 @@ const RegistrPage = (props: Props) => {
   );
 };
 
-export default RegistrPage;
+export default RegisterPage;

app/[locale]/(routes)/crm/accounts/page.tsx

@@ -9,6 +9,7 @@ import { getAccounts } from "@/actions/crm/get-accounts";
 const AccountsPage = async () => {
   const crmData = await getAllCrmData();
   const accounts = await getAccounts();
+
   return (
     <Container
       title="Accounts"

app/[locale]/(routes)/crm/opportunities/table-components/columns.tsx

@@ -98,6 +98,28 @@ export const columns: ColumnDef<Opportunity>[] = [
     enableSorting: true,
     enableHiding: true,
   },
+  {
+    accessorKey: "budget",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Budget" />
+    ),
+
+    cell: ({ row }) => {
+      console.log(row.original.budget);
+      return (
+        <div>
+          {row.original.budget
+            ? row.original.budget.toLocaleString("en-US", {
+                style: "currency",
+                currency: "USD",
+              })
+            : "N/A"}
+        </div>
+      );
+    },
+    enableSorting: true,
+    enableHiding: true,
+  },
   {
     accessorKey: "next_step",
     header: ({ column }) => (

app/[locale]/(routes)/page.tsx

@@ -48,8 +48,6 @@ const DashboardPage = async () => {
   const usersTasks = await getUserTasks(userId);
   const revenue = await getExpectedRevenue();
 
-  console.log(revenue, "revenue");
-
   //Find which modules are enabled
   const crmModule = modules.find((module) => module.name === "crm");
   const invoiceModule = modules.find((module) => module.name === "invoice");
@@ -85,7 +83,15 @@ const DashboardPage = async () => {
             <DollarSignIcon className="w-4 h-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-medium">{revenue}</div>
+            <div className="text-2xl font-medium">
+              {
+                //I need revenue value in forma 1.000.000
+                revenue.toLocaleString("en-US", {
+                  style: "currency",
+                  currency: "USD",
+                })
+              }
+            </div>
           </CardContent>
         </Card>
         <Link href="/admin/users">

app/[locale]/(routes)/projects/boards/[boardId]/dialogs/NewSection.tsx

@@ -1,16 +1,12 @@
 "use client";
 
-import LoadingComponent from "@/components/LoadingComponent";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { z } from "zod";
+import axios from "axios";
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+
 import {
   Form,
   FormControl,
@@ -19,23 +15,18 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { zodResolver } from "@hookform/resolvers/zod";
-import axios from "axios";
-import { useRouter } from "next/navigation";
-
-import React, { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+import LoadingComponent from "@/components/LoadingComponent";
 
 type Props = {
   boardId: string;
@@ -85,6 +76,9 @@ const NewSectionDialog = ({ boardId }: Props) => {
         description: error?.response?.data,
       });
     } finally {
+      form.reset({
+        title: "",
+      });
       setIsLoading(false);
       setOpen(false);
       router.refresh();
@@ -132,10 +126,10 @@ const NewSectionDialog = ({ boardId }: Props) => {
                   />
                 </div>
                 <div className="flex w-full justify-end space-x-2 pt-2">
-                  <Button type="submit">Create</Button>
                   <DialogTrigger asChild>
                     <Button variant={"destructive"}>Cancel</Button>
                   </DialogTrigger>
+                  <Button type="submit">Create</Button>
                 </div>
               </form>
             </Form>

app/[locale]/(routes)/projects/boards/[boardId]/dialogs/NewTaskInProject.tsx

@@ -2,6 +2,7 @@
 
 import LoadingComponent from "@/components/LoadingComponent";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Dialog,
   DialogContent,
@@ -20,6 +21,11 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -29,8 +35,11 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/components/ui/use-toast";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import React, { useEffect, useState } from "react";
@@ -55,6 +64,7 @@ const NewTaskInProjectDialog = ({ users, boardId, sections }: Props) => {
   const formSchema = z.object({
     title: z.string().min(3).max(255),
     user: z.string().min(3).max(255),
+    dueDateAt: z.date().default(new Date()),
     priority: z.string().min(3).max(10),
     section: z.string().min(3).max(255),
     content: z.string().min(3).max(500),
@@ -166,6 +176,47 @@ const NewTaskInProjectDialog = ({ users, boardId, sections }: Props) => {
                       </FormItem>
                     )}
                   />
+                  <FormField
+                    control={form.control}
+                    name="dueDateAt"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-col">
+                        <FormLabel>Due date</FormLabel>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <FormControl>
+                              <Button
+                                variant={"outline"}
+                                className={cn(
+                                  "w-[240px] pl-3 text-left font-normal",
+                                  !field.value && "text-muted-foreground"
+                                )}
+                              >
+                                {field.value ? (
+                                  format(field.value, "PPP")
+                                ) : (
+                                  <span>Pick a expected close date</span>
+                                )}
+                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                              </Button>
+                            </FormControl>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-auto p-0" align="start">
+                            <Calendar
+                              mode="single"
+                              selected={field.value}
+                              //@ts-ignore
+                              //TODO: fix this
+                              onSelect={field.onChange}
+                              disabled={(date) => date < new Date("1900-01-01")}
+                              initialFocus
+                            />
+                          </PopoverContent>
+                        </Popover>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                   <FormField
                     control={form.control}
                     name="user"