first commit

README.md

@@ -0,0 +1,5 @@
+# Mantine Next Template
+
+Get started with the template by clicking `Use this template` button on the top of the page.
+
+[Documentation](https://mantine.dev/guides/next/)

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    experimental: {
+        optimizePackageImports: [
+            "@mantine/core",
+            "@mantine/hooks",
+        ],
+    },
+}
+
+export default nextConfig

package.json

@@ -0,0 +1,46 @@
+{
+    "name": "crm-frontend",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@mantine/core": "^8.2.1",
+        "@mantine/dates": "^8.2.1",
+        "@mantine/dropzone": "^8.2.1",
+        "@mantine/form": "^8.2.1",
+        "@mantine/hooks": "^8.2.1",
+        "@mantine/modals": "^8.2.1",
+        "@mantine/notifications": "^8.2.1",
+        "@reduxjs/toolkit": "^2.8.2",
+        "@tabler/icons-react": "^3.34.1",
+        "@tailwindcss/postcss": "^4.1.11",
+        "@tanstack/react-query": "^5.83.0",
+        "dayjs": "^1.11.13",
+        "lodash": "^4.17.21",
+        "next": "15.3.3",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
+        "react-redux": "^9.2.0",
+        "tailwind-preset-mantine": "^2.1.0",
+        "tailwindcss": "^4.1.11"
+    },
+    "devDependencies": {
+        "@types/lodash": "^4",
+        "@types/node": "22.13.11",
+        "@types/react": "19.0.12",
+        "@types/react-dom": "19.0.4",
+        "eslint": "9.23.0",
+        "eslint-config-next": "15.2.3",
+        "postcss": "^8.5.3",
+        "postcss-preset-mantine": "1.17.0",
+        "postcss-simple-vars": "^7.0.1",
+        "prettier": "3.6.2",
+        "typescript": "5.8.2"
+    },
+    "packageManager": "yarn@4.9.2"
+}

postcss.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+        "postcss-preset-mantine": {},
+        "postcss-simple-vars": {
+            variables: {
+                "mantine-breakpoint-xs": "36em",
+                "mantine-breakpoint-sm": "48em",
+                "mantine-breakpoint-md": "62em",
+                "mantine-breakpoint-lg": "75em",
+                "mantine-breakpoint-xl": "88em",
+            },
+        },
+    },
+}

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g fill="none" fill-rule="evenodd"><rect width="500" height="500" fill="#339AF0" rx="250"/><g fill="#FFF"><path fill-rule="nonzero" d="M202.055 135.706c-6.26 8.373-4.494 20.208 3.944 26.42 29.122 21.45 45.824 54.253 45.824 90.005 0 35.752-16.702 68.559-45.824 90.005-8.436 6.215-10.206 18.043-3.944 26.42 6.26 8.378 18.173 10.13 26.611 3.916a153.835 153.835 0 0024.509-22.54h53.93c10.506 0 19.023-8.455 19.023-18.885 0-10.43-8.517-18.886-19.023-18.886h-29.79c8.196-18.594 12.553-38.923 12.553-60.03s-4.357-41.436-12.552-60.03h29.79c10.505 0 19.022-8.455 19.022-18.885 0-10.43-8.517-18.886-19.023-18.886h-53.93a153.835 153.835 0 00-24.509-22.54c-8.438-6.215-20.351-4.46-26.61 3.916z"/><path d="M171.992 246.492c0-15.572 12.624-28.195 28.196-28.195 15.572 0 28.195 12.623 28.195 28.195 0 15.572-12.623 28.196-28.195 28.196-15.572 0-28.196-12.624-28.196-28.196z"/></g></g></svg>

src/app/globals.css

@@ -0,0 +1,2 @@
+@import "tailwind-preset-mantine";
+@import "./theme.css";

src/app/layout.tsx

@@ -0,0 +1,41 @@
+import "@mantine/core/styles.css"
+import "@mantine/dates/styles.css"
+import "@mantine/notifications/styles.css"
+import '@mantine/dropzone/styles.css';
+
+import React from "react"
+import {
+    ColorSchemeScript,
+    mantineHtmlProps,
+    MantineProvider,
+} from "@mantine/core"
+import { theme } from "./theme"
+import "./globals.css"
+import { Notifications } from "@mantine/notifications"
+import { ModalsProvider } from "@mantine/modals"
+
+export const metadata = {
+    title: "Mantine Next.js template",
+    description: "I am using Mantine with Next.js!",
+}
+
+export default function RootLayout({ children }: { children: any }) {
+    return (
+        <html lang="en" {...mantineHtmlProps}>
+            <head>
+                <ColorSchemeScript />
+                <link rel="shortcut icon" href="/favicon.svg" />
+                <meta
+                    name="viewport"
+                    content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+                />
+            </head>
+            <body>
+                <MantineProvider theme={theme}>
+                    <Notifications />
+                    <ModalsProvider>{children}</ModalsProvider>
+                </MantineProvider>
+            </body>
+        </html>
+    )
+}

src/app/page.tsx

@@ -0,0 +1,52 @@
+import { ColorSchemesSwitcher } from "@/components/color-schemes-switcher"
+import {
+    AppShell,
+    AppShellHeader,
+    AppShellMain,
+    Text,
+    Title,
+} from "@mantine/core"
+
+export default function Home() {
+    return (
+        <AppShell header={{ height: 60 }} padding="md">
+            <AppShellHeader></AppShellHeader>
+            <AppShellMain>
+                <Title className="text-center mt-20">
+                    Welcome to{" "}
+                    <Text
+                        inherit
+                        variant="gradient"
+                        component="span"
+                        gradient={{ from: "pink", to: "yellow" }}
+                    >
+                        Mantine
+                    </Text>{" "}
+                    +
+                    <Text
+                        inherit
+                        variant="gradient"
+                        component="span"
+                        gradient={{ from: "blue", to: "green" }}
+                    >
+                        TailwindCSS
+                    </Text>
+                </Title>
+                <Text
+                    className="text-bold text-center text-gray-700 dark:text-gray-300 max-w-[500px] mx-auto mt-xl"
+                    ta="center"
+                    size="lg"
+                    maw={580}
+                    mx="auto"
+                    mt="xl"
+                >
+                    This starter Next.js project includes a minimal setup for
+                    Mantine with TailwindCSS. To get started edit page.tsx file.
+                </Text>
+                <div className="flex justify-center mt-10">
+                    <ColorSchemesSwitcher />
+                </div>
+            </AppShellMain>
+        </AppShell>
+    )
+}

src/app/theme.css

@@ -0,0 +1,133 @@
+/** This file is autogenerated by the script. Do not edit it manually. */
+
+
+@theme {
+  
+
+  /* colors - all */
+  
+
+  /* colors - variant specific */
+  
+
+  /* breakpoints */
+  --breakpoint-*: initial;
+  --breakpoint-xs: 36em;
+  --breakpoint-sm: 48em;
+  --breakpoint-md: 62em;
+  --breakpoint-lg: 75em;
+  --breakpoint-xl: 88em;
+
+  /* readd back tailwind's default containers vars to fix #24 */
+  --size-3xs: 16rem;
+  --size-2xs: 18rem;
+  --size-xs: 20rem;
+  --size-sm: 24rem;
+  --size-md: 28rem;
+  --size-lg: 32rem;
+  --size-xl: 36rem;
+  --size-2xl: 42rem;
+  --size-3xl: 48rem;
+  --size-4xl: 56rem;
+  --size-5xl: 64rem;
+  --size-6xl: 72rem;
+  --size-7xl: 80rem;
+
+  --container-3xs: var(--size-3xs);
+  --container-2xs: var(--size-2xs);
+  --container-xs: var(--size-xs);
+  --container-sm: var(--size-sm);
+  --container-md: var(--size-md);
+  --container-lg: var(--size-lg);
+  --container-xl: var(--size-xl);
+  --container-2xl: var(--size-2xl);
+  --container-3xl: var(--size-3xl);
+  --container-4xl: var(--size-4xl);
+  --container-5xl: var(--size-5xl);
+  --container-6xl: var(--size-6xl);
+  --container-7xl: var(--size-7xl);
+
+  --width-3xs: var(--size-3xs);
+  --width-2xs: var(--size-2xs);
+  --width-xs: var(--size-xs);
+  --width-sm: var(--size-sm);
+  --width-md: var(--size-md);
+  --width-lg: var(--size-lg);
+  --width-xl: var(--size-xl);
+  --width-2xl: var(--size-2xl);
+  --width-3xl: var(--size-3xl);
+  --width-4xl: var(--size-4xl);
+  --width-5xl: var(--size-5xl);
+  --width-6xl: var(--size-6xl);
+  --width-7xl: var(--size-7xl);
+
+  --min-width-3xs: var(--size-3xs);
+  --min-width-2xs: var(--size-2xs);
+  --min-width-xs: var(--size-xs);
+  --min-width-sm: var(--size-sm);
+  --min-width-md: var(--size-md);
+  --min-width-lg: var(--size-lg);
+  --min-width-xl: var(--size-xl);
+  --min-width-2xl: var(--size-2xl);
+  --min-width-3xl: var(--size-3xl);
+  --min-width-4xl: var(--size-4xl);
+  --min-width-5xl: var(--size-5xl);
+  --min-width-6xl: var(--size-6xl);
+  --min-width-7xl: var(--size-7xl);
+
+  --max-width-3xs: var(--size-3xs);
+  --max-width-2xs: var(--size-2xs);
+  --max-width-xs: var(--size-xs);
+  --max-width-sm: var(--size-sm);
+  --max-width-md: var(--size-md);
+  --max-width-lg: var(--size-lg);
+  --max-width-xl: var(--size-xl);
+  --max-width-2xl: var(--size-2xl);
+  --max-width-3xl: var(--size-3xl);
+  --max-width-4xl: var(--size-4xl);
+  --max-width-5xl: var(--size-5xl);
+  --max-width-6xl: var(--size-6xl);
+  --max-width-7xl: var(--size-7xl);
+
+  --height-3xs: var(--size-3xs);
+  --height-2xs: var(--size-2xs);
+  --height-xs: var(--size-xs);
+  --height-sm: var(--size-sm);
+  --height-md: var(--size-md);
+  --height-lg: var(--size-lg);
+  --height-xl: var(--size-xl);
+  --height-2xl: var(--size-2xl);
+  --height-3xl: var(--size-3xl);
+  --height-4xl: var(--size-4xl);
+  --height-5xl: var(--size-5xl);
+  --height-6xl: var(--size-6xl);
+  --height-7xl: var(--size-7xl);
+
+  --min-height-3xs: var(--size-3xs);
+  --min-height-2xs: var(--size-2xs);
+  --min-height-xs: var(--size-xs);
+  --min-height-sm: var(--size-sm);
+  --min-height-md: var(--size-md);
+  --min-height-lg: var(--size-lg);
+  --min-height-xl: var(--size-xl);
+  --min-height-2xl: var(--size-2xl);
+  --min-height-3xl: var(--size-3xl);
+  --min-height-4xl: var(--size-4xl);
+  --min-height-5xl: var(--size-5xl);
+  --min-height-6xl: var(--size-6xl);
+  --min-height-7xl: var(--size-7xl);
+
+  --max-height-3xs: var(--size-3xs);
+  --max-height-2xs: var(--size-2xs);
+  --max-height-xs: var(--size-xs);
+  --max-height-sm: var(--size-sm);
+  --max-height-md: var(--size-md);
+  --max-height-lg: var(--size-lg);
+  --max-height-xl: var(--size-xl);
+  --max-height-2xl: var(--size-2xl);
+  --max-height-3xl: var(--size-3xl);
+  --max-height-4xl: var(--size-4xl);
+  --max-height-5xl: var(--size-5xl);
+  --max-height-6xl: var(--size-6xl);
+  --max-height-7xl: var(--size-7xl);
+}

src/app/theme.ts

@@ -0,0 +1,15 @@
+"use client"
+
+import { createTheme } from "@mantine/core"
+
+export const theme = createTheme({
+    breakpoints: {
+        xs: "36em",
+        sm: "48em",
+        md: "62em",
+        lg: "75em",
+        xl: "88em",
+    },
+})
+
+export default theme

src/components/color-schemes-switcher.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { Button, Group, useMantineColorScheme } from "@mantine/core"
+
+export function ColorSchemesSwitcher() {
+    const { setColorScheme, clearColorScheme } = useMantineColorScheme()
+
+    return (
+        <Group>
+            <Button variant={"filled"} onClick={() => setColorScheme("light")}>
+                Light
+            </Button>
+            <Button onClick={() => setColorScheme("dark")}>Dark</Button>
+            <Button onClick={() => setColorScheme("auto")}>Auto</Button>
+            <Button onClick={clearColorScheme}>Clear</Button>
+        </Group>
+    )
+}

tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "exclude": ["node_modules"]
+}