update dashboard data and design and change req from ssr to csr & change design and data doctor and clinic item

2025-06-17 00:26:16 +03:30
parent 528006e7ff
commit debd6b0eb5
13 changed files with 306 additions and 116 deletions
@@ -0,0 +1,101 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoSelector({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  error,
+  disabled = false,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      value={value || ""}
+      ListboxProps={listboxProps}
+      getOptionLabel={(option) => {
+        if (typeof option === "string") return option;
+        return option?.name || option?.label || "";
+      }}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(e, newValue) => {
+        updateData(name, newValue?.label || newValue || "");
+      }}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: error
+            ? "1px solid red !important"
+            : "1px solid #D7D7D7 !important",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: error ? "red !important" : "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={option.id || props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name || option.label}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AutoSelector;
@@ -0,0 +1,71 @@
+import EditGrayA from "@/components/icons/EditGrayA";
+import EditOrangeA from "@/components/icons/EditOrangeA";
+import { Button, TextField } from "@mui/material";
+
+function Field({
+  changeData,
+  multiline,
+  icon,
+  placeholder,
+  data,
+  name,
+  iconGray,
+  error,
+  isTransparent,
+  type,
+  props,
+  disable,
+}) {
+  return (
+    <div className="relative w-full">
+      <TextField
+        {...props}
+        // value={data}
+        defaultValue={data}
+        disabled={disable}
+        type={type || "text"}
+        placeholder={placeholder || ""}
+        className={`!w-full res-field-account  dark:!bg-transparent ${
+          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
+        }`}
+        onChange={(e) => {
+          changeData(e.target.value, "value", name);
+        }}
+        sx={{
+          // border: "1px solid red !important",
+          "& .MuiFormLabel-root": {
+            top: "-4px !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: error
+              ? "1px solid red !important"
+              : "1px solid #D7D7D7 !important",
+          },
+          "& .MuiInputBase-root": {
+            padding: "0 !important",
+            borderRadius: "8px !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #5559CE !important",
+              transition: "0.5s all",
+            },
+          },
+          "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+            {
+              display: "none",
+            },
+        }}
+      />
+      <Button
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
+      >
+        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
+      </Button>
+    </div>
+  );
+}
+
+export default Field;