docker

Dockerfile

@@ -0,0 +1,28 @@
+FROM registry.vnfco.ir/library/node:14-alpine AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json ./
+RUN npm install --force --production
+
+
+FROM registry.vnfco.ir/library/node:14-alpine AS builder
+WORKDIR /app
+ARG NODE_ENV=production
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN npm run build
+
+
+FROM registry.vnfco.ir/library/node:14-alpine AS runner
+WORKDIR /app
+ARG NODE_ENV=production
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/.env.production ./.env.production
+COPY --from=builder /app/next.config.js ./next.config.js
+
+EXPOSE 3000
+ENV PORT 3000
+CMD ["node_modules/.bin/next", "start"]

Dockerfile.emergency

@@ -0,0 +1,13 @@
+FROM registry.vnfco.ir/library/node:14-alpine AS runner
+WORKDIR /app
+ARG NODE_ENV=production
+COPY public ./public
+COPY .next ./.next
+COPY node_modules ./node_modules
+COPY package.json ./package.json
+COPY .env.production ./.env.production
+COPY next.config.js ./next.config.js
+
+EXPOSE 3000
+ENV PORT 3000
+CMD ["node_modules/.bin/next", "start"]

package.json

@@ -9,20 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
     "autoprefixer": "10.4.15",
     "axios": "^1.5.1",
     "framer-motion": "^10.16.1",
     "next": "13.4.19",
     "postcss": "8.4.28",
     "react": "18.2.0",
-    "react-datepicker2": "^3.3.13",
     "react-dom": "18.2.0",
+    "react-modern-calendar-datepicker": "^3.1.6",
     "react-persian-datepicker": "^3.0.2",
     "react-spring-bottom-sheet": "^3.4.1",
     "react-toastify": "^9.1.3",
     "simple-react-validator": "^1.6.2",
     "swiper": "^10.2.0",
-    "tailwindcss": "3.3.3",
-    "zaman": "^2.0.8"
+    "tailwindcss": "3.3.3"
+  },
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "webpack": "^5.89.0"
   }
 }

plugins/BottomSheet/BottomSheetCreateEmployees.jsx

@@ -7,6 +7,7 @@ import AppContext from "@ctx/AppContext";
 import SimpleReactValidator from "simple-react-validator";
 import { toast } from "react-toastify";
 import Buttonbriz from "plugins/Buttonbriz/page";
+import DatePickerIran from "plugins/DatePickerIran/page";
 
 const BottomSheetCreateEmployees = (props) => {
   const CTX = useContext(AppContext);
@@ -151,6 +152,8 @@ const BottomSheetCreateEmployees = (props) => {
           />
         </div>
 
+        <DatePickerIran />
+
         <div className="">
           <Input
             lable="شماره تماس"
@@ -244,5 +247,5 @@ const BottomSheetCreateEmployees = (props) => {
     </BottomSheet>
   );
 };
-
+y:\projects\macsonline\Dockerfile.emergency
 export default BottomSheetCreateEmployees;

plugins/DatePickerIran/page.jsx

@@ -0,0 +1,34 @@
+"use client";
+import React, { useState } from "react";
+import "@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css";
+import DatePicker from "@hassanmojab/react-modern-calendar-datepicker";
+import Buttonbriz from "plugins/Buttonbriz/page";
+import { Calendar } from "react-modern-calendar-datepicker";
+
+const DatePickerIran = () => {
+  const [selectedDay, setSelectedDay] = useState(null);
+
+  return (
+    <div className="">
+      <div className="flex justify-end z-[1000] relative top-[22px] right-3">
+        <div className="bg-body-100 px-2">
+          <p className="mb-0 text-sm mr-0 mx-auto">تاریخ تولد</p>
+        </div>
+      </div>
+
+      <DatePicker
+        value={selectedDay}
+        onChange={setSelectedDay}
+        shouldHighlightWeekends
+        inputClassName={`peer w-full border-b placeholder:text-transparent relative !text-right  ${
+          2 == 1 ? "form-control-white" : "form-control"
+        }`}
+        locale="fa" // add this
+        inputPlaceholder="  "
+        inputName={1}
+      />
+    </div>
+  );
+};
+
+export default DatePickerIran;

plugins/Input/page.jsx

@@ -46,6 +46,7 @@ const Input = ({
           readOnly={readOnly ? true : false}
           value={value}
           onChange={inputEvent}
+          id={id}
         >
           {selectData &&
             selectData.map((e) => (

src/app/layout.jsx

@@ -16,7 +16,6 @@ import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import Loading from "plugins/Loading/page";
 import Chapar, { getToken } from "plugins/Chapar";
-import { Calendar, DatePicker } from "react-persian-datepicker";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -337,9 +336,6 @@ export default function RootLayout({ children }) {
           {shouldRenderComponent && <NavBAr />}
           <ToastContainer position="bottom-right" closeOnClick={true} rtl />
           <Loading />
-
-          <DatePicker />
-
           {BigPlusOpen ? (
             <div className="fixed w-full  top-0 z-40">
               <motion.div

style/globals.css

@@ -35,11 +35,11 @@
   }
 
   .form-control {
-    @apply appearance-none !border-[2px] bg-body-100 border-gray-300 rounded-2xl w-full py-4 px-3 text-gray-700 leading-tight focus:border-[2px] focus:border-red-600 focus:outline-none transition-all;
+    @apply !appearance-none !border-[2px] !bg-body-100 !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none !transition-all;
   }
 
   .form-control-white {
-    @apply appearance-none !border-[2px] bg-white border-gray-300 rounded-2xl w-full py-4 px-3 text-gray-700 leading-tight focus:border-[2px] focus:border-red-600 focus:outline-none transition-all;
+    @apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-2xl !w-full !py-4 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none !transition-all;
   }
 }
 
@@ -124,159 +124,40 @@ body {
   background-color: #356859;
 }
 
-.calendarContainer {
-  border-radius: 3px;
-  box-shadow: 0 3px 10px #dbdbdb;
-  border: 1px solid #cccccc;
-  width: 300px;
-  margin: auto;
-  text-align: center;
-  padding: 10px;
-  background-color: #fff;
-}
-
-.calendarContainer * {
-  box-sizing: border-box;
-}
-
-.calendarContainer .dayPickerContainer:after,
-.calendarContainer .monthsList:after,
-.calendarContainer .daysOfWeek:after {
-  content: "";
-  display: block;
-  clear: both;
-}
-
-/* Heading */
-.calendarContainer .heading {
-  height: 42px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.calendarContainer .heading > button {
-  border-radius: 3px;
-  background: none;
-  margin: 5px 0;
-  border: 1px solid #f7f7f7;
-  text-align: center;
-  line-height: 30px;
-  width: 36px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.calendarContainer .heading > button:hover {
-  background-color: #f2f2f2;
-}
-
-.calendarContainer .heading > span {
-  line-height: 35px;
-}
-
-.calendarContainer .heading svg {
-  width: 10px;
-}
-
-.calendarContainer .heading .prev {
-  float: right;
-}
-
-.calendarContainer .heading .next {
-  float: left;
-}
-
-.calendarContainer .heading .title {
-  line-height: 32px;
-  width: 120px;
-  height: 32px;
-  font-size: 1em;
-  margin: 5px 0;
-  border: 1px solid #f7f7f7;
-  text-align: center;
-  display: inline-block;
-  font-weight: normal;
-}
-
-/* Day wrapper styles */
-.calendarContainer .dayWrapper {
-  padding: 5;
-  float: right;
-  width: 14.28571429%;
-}
-
-/* Day wrapper button styles */
-.calendarContainer .dayWrapper button {
-  border: none;
-  background: none;
-  outline: none;
+.DatePicker {
   width: 100%;
-  height: 36px;
-  border-radius: 3px;
-  cursor: pointer;
+  margin-top: 10px;
+}
+.responsive-datePicker {
+  /* by setting font-size, all the elements will correspond */
+  font-size: 9px !important; /* default to 10px */
 }
 
-.calendarContainer .dayWrapper button:hover {
-  background-color: #eeeeff;
+@media (max-width: 1500px) {
+  .responsive-datePicker {
+    font-size: 8px !important;
+  }
 }
 
-.calendarContainer .dayWrapper button[disabled] {
-  color: #aaa;
-  cursor: not-allowed;
-  background-color: #ebebeb;
+@media (max-width: 1200px) {
+  .responsive-datePicker {
+    font-size: 7px !important;
+  }
 }
 
-.calendarContainer .dayWrapper button.selected {
-  background-color: #337ab7;
-  color: #ffffff;
+@media (max-width: 768px) {
+  .responsive-datePicker {
+    font-size: 6px !important;
+  }
 }
 
-.calendarContainer .dayWrapper:not(.currentMonth) button {
-  opacity: 0.5;
+/* Large screens */
+@media (min-width: 2500px) {
+  .responsive-datePicker {
+    font-size: 12px !important;
+  }
 }
-
-/* Days of week row */
-.calendarContainer .daysOfWeek {
-  border-bottom: 1px solid #eee;
-  margin-bottom: 5px;
-  padding-bottom: 5px;
-  display: flex;
-  width: 100%;
-}
-
-.calendarContainer .daysOfWeek > div {
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
-/* Month selector portion */
-.calendarContainer .monthsList {
-  clear: both;
-  width: 100%;
-}
-
-.calendarContainer .monthsList button {
-  width: 33.33333332%;
-  height: 25%;
-  float: right;
-  border: 1px solid #f9f9f9;
-  outline: none;
-  font-size: 1em;
-  background: #fff;
-  padding: 10px 0;
-  cursor: pointer;
-}
-
-.calendarContainer .monthsList button:hover {
-  background: #eeeeee;
-  cursor: pointer;
-}
-
-/* Selected state of buttons */
-.calendarContainer .selected button,
-.calendarContainer .selected button:hover,
-.calendarContainer .selected button:active,
-.calendarContainer .selected button:focus {
-  background-color: #337ab7;
-  color: #ffffff;
+.DatePicker__CalenderContainer {
+  top: -100px !important;
+  z-index: 100000;
 }

webpack.config.js

@@ -0,0 +1,49 @@
+var fs = require("fs");
+var webpack = require("webpack");
+var babelrc = fs.readFileSync("./.babelrc");
+var babelLoaderQuery = JSON.parse(babelrc);
+
+var plugins = [
+  new webpack.DefinePlugin({
+    "process.env": {
+      NODE_ENV: JSON.stringify(process.env.NODE_ENV || "production"),
+    },
+  }),
+];
+
+if (process.env.NODE_ENV !== "development") {
+  plugins.push(new webpack.optimize.UglifyJsPlugin());
+}
+
+module.exports = {
+  context: __dirname,
+  entry: ["./examples/src/main.js", "./examples/src/main.css"],
+  resolve: {
+    modulesDirectories: ["node_modules", "examples"],
+    extensions: ["", ".json", ".js", ".jsx"],
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loaders: ["babel-loader?" + JSON.stringify(babelLoaderQuery)],
+      },
+      {
+        test: /\.css?$/,
+        exclude: /node_modules/,
+        loader: "style!css?modules&importLoaders=1",
+      },
+      {
+        test: /\.css?$/,
+        include: /node_modules/,
+        loader: "style!css",
+      },
+    ],
+  },
+  output: {
+    filename: "build.js",
+    path: __dirname + "/examples",
+  },
+  plugins: plugins,
+};