@pisell/private-materials 6.3.116 → 6.3.117

package/lib/components/ecocup/cupList/index.js

@@ -0,0 +1,262 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ecocup/cupList/index.tsx
+var cupList_exports = {};
+__export(cupList_exports, {
+  default: () => cupList_default
+});
+module.exports = __toCommonJS(cupList_exports);
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_dayjs = __toESM(require("dayjs"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_icons = require("@ant-design/icons");
+var import_hooks = require("./hooks");
+var import_const = require("./const");
+var import_PageHeader = __toESM(require("../components/PageHeader"));
+var import_CupActionModal = __toESM(require("../components/CupActionModal"));
+var import_SearchBar = __toESM(require("../components/SearchBar"));
+var import_hooks2 = require("../hooks");
+var import_locales = __toESM(require("../locales"));
+var import_hooks3 = require("../hooks");
+var import_index = require("./index.less");
+var prefixCls = "ecocup-cup-list";
+var SCAN_LISTENER_KEY = "eco-cup-list-scan-listener";
+var PAGE_SIZE = 10;
+var FORMAT = "YYYY-MM-DD HH:mm:ss";
+var CupList = (props) => {
+  const [date, setDate] = (0, import_react.useState)([
+    (0, import_dayjs.default)().startOf("day"),
+    (0, import_dayjs.default)().endOf("day")
+  ]);
+  const cupActionModal = (0, import_hooks2.useModal)("ecocup-list-action-modal");
+  const { isNormalShop } = (0, import_hooks2.useGetGoalShopInfo)();
+  const shopId = (0, import_hooks2.useGetShopId)();
+  const isApp = (0, import_hooks2.useIsApp)();
+  const language = (0, import_hooks2.useLanguage)();
+  const { isEcoShare } = (0, import_hooks3.useGetShare)();
+  import_utils.locales.init(import_locales.default, language);
+  const [listParams, setListParams] = (0, import_react.useState)({
+    skip: 1,
+    num: PAGE_SIZE
+  });
+  const listParamsRef = (0, import_react.useRef)(listParams);
+  const { loading, data, run } = (0, import_hooks.useCupListsApi)({ isEcoShare });
+  const { data: staticsData, getStatics } = (0, import_hooks.useStatisticsApi)({ isEcoShare });
+  const { data: ecoShopLists, getEcoShopLists } = (0, import_hooks.useEcoShopListsApi)({
+    isEcoShare
+  });
+  const { postExportApi } = (0, import_hooks.useExportApi)();
+  const { postShareApi } = (0, import_hooks.useShareApi)();
+  const isPartner = (0, import_react.useMemo)(() => {
+    return !!(isNormalShop || (listParams == null ? void 0 : listParams.partner_shop_id));
+  }, [isNormalShop, listParams == null ? void 0 : listParams.partner_shop_id]);
+  (0, import_react.useEffect)(() => {
+    listParamsRef.current = listParams;
+  }, [listParams]);
+  const getLists = (0, import_react.useCallback)(
+    (params) => {
+      run({
+        ...(listParamsRef == null ? void 0 : listParamsRef.current) || {},
+        ...params
+      });
+    },
+    [listParams]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    if (isApp) return;
+    getStatics({
+      started_at: (_a = date == null ? void 0 : date[0]) == null ? void 0 : _a.format(FORMAT),
+      ended_at: (_b = date == null ? void 0 : date[1]) == null ? void 0 : _b.format(FORMAT),
+      partner_shop_id: listParams == null ? void 0 : listParams.partner_shop_id
+    });
+  }, [date, isApp, listParams == null ? void 0 : listParams.partner_shop_id]);
+  (0, import_react.useEffect)(() => {
+    if (isNormalShop || isApp) return;
+    getEcoShopLists({});
+  }, [isNormalShop, isApp]);
+  (0, import_react.useEffect)(() => {
+    getLists();
+  }, [getLists]);
+  const handleClickAction = (0, import_react.useCallback)(
+    (type, record) => {
+      cupActionModal.open({
+        data: { type, cupData: record, customerData: (record == null ? void 0 : record.customer) || {} },
+        onCancel: cupActionModal.close,
+        onOk: (values) => {
+          cupActionModal.close();
+          getLists();
+        }
+      });
+    },
+    [cupActionModal]
+  );
+  const columns = (0, import_hooks.useColumns)({
+    onClickAction: handleClickAction,
+    locales: import_utils.locales,
+    isEcoShare
+  });
+  const summary = (0, import_hooks.useSummary)(import_utils.locales, staticsData, isPartner);
+  const handleValuesChange = (changedValues, values) => {
+    var _a, _b, _c;
+    const orderByTypes = (_a = values == null ? void 0 : values.order_by) == null ? void 0 : _a.split(":");
+    const params = {
+      ...(values == null ? void 0 : values.filters) || {},
+      order_by: orderByTypes == null ? void 0 : orderByTypes[0],
+      sort: orderByTypes == null ? void 0 : orderByTypes[1],
+      skip: ((_b = values == null ? void 0 : values.pagination) == null ? void 0 : _b.page) || 1,
+      num: ((_c = values == null ? void 0 : values.pagination) == null ? void 0 : _c.size) || PAGE_SIZE,
+      partner_shop_id: (values == null ? void 0 : values.partner_shop_id) || void 0,
+      status: (values == null ? void 0 : values.status) || void 0
+    };
+    setListParams((prev) => ({ ...prev, ...params }));
+  };
+  const { run: handleValuesChangeDebounce } = (0, import_ahooks.useDebounceFn)(
+    handleValuesChange,
+    {
+      wait: 200
+    }
+  );
+  const handleChange = (value, type) => {
+    if (type === "search") {
+      setListParams((prev) => ({ ...prev, search: value, skip: 1 }));
+    } else {
+      setDate(value);
+      setListParams((prev) => {
+        var _a, _b;
+        return {
+          ...prev,
+          skip: 1,
+          operated_at_start: (_a = value == null ? void 0 : value[0]) == null ? void 0 : _a.format(FORMAT),
+          operated_at_end: (_b = value == null ? void 0 : value[1]) == null ? void 0 : _b.format(FORMAT)
+        };
+      });
+    }
+  };
+  const pagination = (0, import_react.useMemo)(() => {
+    return {
+      pageSize: PAGE_SIZE,
+      total: (data == null ? void 0 : data.count) || 0,
+      size: "large",
+      current: (listParams == null ? void 0 : listParams.skip) || 1,
+      localPagination: false
+    };
+  }, [data == null ? void 0 : data.count, listParams == null ? void 0 : listParams.skip]);
+  const onClickButton = (0, import_ahooks.useMemoizedFn)((key) => {
+    if (key === "export") {
+      postExportApi({
+        isPartner,
+        listParams
+      });
+    } else if (key === "share") {
+      postShareApi();
+    }
+  });
+  const headerRightContent = (0, import_react.useMemo)(() => {
+    if (isNormalShop || isEcoShare) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header-right-content` }, import_const.HEADER_RIGHT_OPTIONS.map((button) => /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Button,
+      {
+        key: button.key,
+        type: button.type,
+        size: "large",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: button.icon, size: 22 }),
+        onClick: () => onClickButton(button.key),
+        className: `${prefixCls}-header-right-content-button`
+      },
+      import_utils.locales.getText(button.languageKey)
+    )));
+  }, [isNormalShop, onClickButton, isEcoShare]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-container` }, /* @__PURE__ */ import_react.default.createElement(import_materials.Page, { style: { height: "100%" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Table,
+    {
+      dataSource: (data == null ? void 0 : data.list) || [],
+      columns,
+      title: !isApp ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        import_PageHeader.default,
+        {
+          title: import_utils.locales.getText("pisell2.text.ecocup.title"),
+          rightContent: headerRightContent,
+          isReturn: !isEcoShare
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.DatePicker.RangePicker,
+        {
+          inputReadOnly: true,
+          bordered: false,
+          allowClear: false,
+          size: "large",
+          suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CalendarOutlined, null),
+          value: date,
+          onChange: handleChange,
+          format: "DD/MM/YYYY",
+          className: `${prefixCls}-date-picker`
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_SearchBar.default,
+        {
+          scanListenerKey: SCAN_LISTENER_KEY,
+          size: "small",
+          placeholder: import_utils.locales.getText(
+            "pisell2.text.ecocup.scan-or-search"
+          ),
+          onSearch: (value) => handleChange(value, "search")
+        }
+      ))) : null,
+      align: "center",
+      pagination,
+      columnSetting: !isApp ? import_const.COLUMN_SETTING : null,
+      sort: !isApp ? import_const.SORT_SETTINGS : null,
+      filter: !isApp ? (0, import_const.FILTER)(
+        import_utils.locales,
+        isNormalShop,
+        ecoShopLists,
+        isPartner,
+        listParams == null ? void 0 : listParams.skip
+      ) : null,
+      summary: !isApp ? summary : null,
+      className: `${prefixCls}-table`,
+      rowClassName: `${prefixCls}-table-row`,
+      loading,
+      onValuesChange: handleValuesChangeDebounce,
+      rowKey: "id",
+      virtual: false,
+      tableLayout: "",
+      scroll: {
+        scrollToFirstRowOnChange: true,
+        autoCalc: true
+      }
+    }
+  )), cupActionModal.visible && /* @__PURE__ */ import_react.default.createElement(import_CupActionModal.default, { ...cupActionModal.modalProps }));
+};
+var cupList_default = CupList;

package/lib/components/ecocup/cupList/index.less

@@ -0,0 +1,159 @@
+@prefixCls: ecocup-cup-list;
+
+.@{prefixCls} {
+  &-container {
+    height: 100%;
+    background-color: #2A1C48;
+    display: flex;
+    flex-direction: column;
+    padding: 38px 12px 12px;
+
+    .pisell-lowcode-page-header-left {
+      flex: 1;
+    }
+
+    .pisell-lowcode-action-btn-icon {
+      color: #fff !important;
+
+      &:hover {
+        color: #101828 !important;
+      }
+    }
+
+    .materials-grid-table-wrap {
+      .grid-view-table-wrap {
+        border-radius: 0 0 10px 10px;
+        overflow: hidden;
+      }
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  &-date-picker {
+    width: 240px !important;
+    background: #916ce0;
+    border-radius: 8px;
+
+    >div>div {
+      font-size: 14px;
+      color: #fff;
+      font-weight: 600;
+      line-height: 20px;
+
+      input {
+        height: 38px !important;
+        line-height: 38px !important;
+        padding: 0 0 0 14px !important;
+
+        &::selection {
+          background: transparent;
+        }
+      }
+    }
+  }
+
+  &-summary {
+    &-card {
+      min-height: 80px;
+      border: none;
+
+      .pisell-lowcode-card-body {
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        min-height: 80px;
+      }
+
+      &-statistic {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        gap: 8px;
+        font-weight: 600;
+
+        .pisell-lowcode-statistic-title,
+        .pisell-lowcode-statistic-content-value {
+          line-height: 24px;
+          margin: 0;
+        }
+
+        .pisell-lowcode-statistic-content-value {
+          font-size: 28px;
+        }
+
+        .pisell-lowcode-statistic-content {
+          line-height: 28px;
+        }
+      }
+    }
+
+    &-primary {
+      background: #916ce0;
+
+      .pisell-lowcode-statistic-title,
+      .pisell-lowcode-statistic-content-value {
+        color: #ffffff !important;
+      }
+    }
+  }
+
+  &-table {
+    td {
+      text-align: center;
+    }
+
+    &-table-row {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &-table-status {
+    padding: 4px 8px;
+    border-radius: 16px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    width: max-content;
+    margin: 0 auto;
+  }
+
+  &-table-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  &-header-right-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    &-button {
+      width: 100px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      box-shadow: none;
+      border: 1px solid #7f56d9;
+      color: #7f56d9;
+      font-weight: bold;
+      &:hover {
+        background: #7f56d9;
+        color: #fff;
+      }
+    }
+  }
+}

package/lib/components/ecocup/cupProject/const.js

@@ -0,0 +1,65 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ecocup/cupProject/const.ts
+var const_exports = {};
+__export(const_exports, {
+  CUP_PROJECT_FOOTER_BUTTONS: () => CUP_PROJECT_FOOTER_BUTTONS
+});
+module.exports = __toCommonJS(const_exports);
+var CUP_PROJECT_FOOTER_BUTTONS = [
+  {
+    key: "add-new-customer",
+    icon: "pisell2-plus-circle",
+    type: "primary",
+    size: "large",
+    languageKey: "pisell2.text.cup-project.footer.button.new-customer"
+  },
+  {
+    key: "customer-list",
+    icon: "pisell2-file-check-02",
+    type: "primary",
+    size: "large",
+    languageKey: "pisell2.text.cup-project.footer.button.customer-list"
+  },
+  {
+    key: "cup-list",
+    icon: "pisell2-file-check-02",
+    type: "primary",
+    size: "large",
+    languageKey: "pisell2.text.cup-project.footer.button.cup-list"
+  },
+  // {
+  //   key: 'register-cups',
+  //   icon: 'RestOutlined',
+  //   type: 'primary',
+  //   size: 'large',
+  //   languageKey: 'pisell2.text.cup-project.footer.button.register-cups',
+  // },
+  {
+    key: "setting",
+    icon: "pisell2-settings-02",
+    type: "primary",
+    size: "large",
+    languageKey: "pisell2.text.cup-project.footer.button.setting"
+  }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CUP_PROJECT_FOOTER_BUTTONS
+});

package/lib/components/ecocup/cupProject/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './index.less';
+export default function EcoCupProject(): React.JSX.Element;

package/lib/components/ecocup/cupProject/index.js

@@ -0,0 +1,135 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ecocup/cupProject/index.tsx
+var cupProject_exports = {};
+__export(cupProject_exports, {
+  default: () => EcoCupProject
+});
+module.exports = __toCommonJS(cupProject_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_index = require("./index.less");
+var import_hooks = require("../hooks");
+var import_locales = __toESM(require("../locales"));
+var import_const = require("./const");
+var import_SearchBar = __toESM(require("../components/SearchBar"));
+var import_AddCustomerModal = __toESM(require("../components/AddCustomerModal"));
+var import_CustomerAndCupModal = __toESM(require("../components/CustomerAndCupModal"));
+var import_SettingModal = __toESM(require("../components/SettingModal"));
+var SCAN_LISTENER_KEY = "eco-cup-project-scan-listener";
+function EcoCupProject() {
+  const language = (0, import_hooks.useLanguage)();
+  import_utils.locales.init(import_locales.default, language);
+  const getApp = (0, import_hooks.useGetApp)();
+  const addCustomerModal = (0, import_hooks.useModal)("ecocup-add-customer-modal");
+  const settingModal = (0, import_hooks.useModal)("ecocup-setting-modal");
+  const customerAndCupModal = (0, import_hooks.useModal)("ecocup-customer-and-cup-modal");
+  const { goalShopId } = (0, import_hooks.useGetGoalShopInfo)();
+  const onSearchResult = (result) => {
+    console.log("onSearchResult", result);
+    if ((result == null ? void 0 : result.type) === "customer") {
+      customerAndCupModal.open({
+        data: {
+          firstType: result == null ? void 0 : result.type,
+          customerData: result == null ? void 0 : result.data
+        }
+      });
+    } else if ((result == null ? void 0 : result.type) === "cup") {
+      customerAndCupModal.open({
+        data: {
+          firstType: result == null ? void 0 : result.type,
+          cupData: result == null ? void 0 : result.data
+        }
+      });
+    }
+  };
+  const onClickNewCustomer = () => {
+    console.log("onClickNewCustomer");
+    addCustomerModal.open();
+  };
+  const onClickSetting = () => {
+    console.log("onClickSetting");
+    settingModal.open();
+  };
+  const onClickCustomerList = () => {
+    var _a, _b;
+    console.log("onClickCustomerList");
+    const app = getApp == null ? void 0 : getApp();
+    if (goalShopId) {
+      (_a = app == null ? void 0 : app.history) == null ? void 0 : _a.push(`/ecocup/customer-list?goal_shop_id=${goalShopId}`);
+    } else {
+      (_b = app == null ? void 0 : app.history) == null ? void 0 : _b.push("/ecocup/customer-list");
+    }
+  };
+  const onClickCupList = () => {
+    var _a, _b;
+    console.log("onClickCupList");
+    const app = getApp == null ? void 0 : getApp();
+    if (goalShopId) {
+      (_a = app == null ? void 0 : app.history) == null ? void 0 : _a.push(`/ecocup/cup-list?goal_shop_id=${goalShopId}`);
+    } else {
+      (_b = app == null ? void 0 : app.history) == null ? void 0 : _b.push("/ecocup/cup-list");
+    }
+  };
+  const onClickButton = (key) => {
+    switch (key) {
+      case "add-new-customer":
+        onClickNewCustomer();
+        break;
+      case "customer-list":
+        onClickCustomerList();
+        break;
+      case "cup-list":
+        onClickCupList();
+        break;
+      case "setting":
+        onClickSetting();
+        break;
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "ecocup-cup-project" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "ecocup-cup-project-title" }, import_utils.locales.getText("pisell2.text.cup-project.title")), /* @__PURE__ */ import_react.default.createElement("div", { className: "ecocup-cup-project-search-bar" }, /* @__PURE__ */ import_react.default.createElement(
+    import_SearchBar.default,
+    {
+      scanListenerKey: SCAN_LISTENER_KEY,
+      onSearchResult
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "ecocup-cup-project-actions" }, import_const.CUP_PROJECT_FOOTER_BUTTONS.map((button) => /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Button,
+    {
+      key: button.key,
+      type: button.type,
+      size: "large",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: button.icon, size: 32 }),
+      onClick: () => onClickButton(button.key),
+      className: "ecocup-cup-project-actions-button"
+    },
+    import_utils.locales.getText(button.languageKey)
+  ))), addCustomerModal.visible && /* @__PURE__ */ import_react.default.createElement(import_AddCustomerModal.default, { ...addCustomerModal.modalProps }), customerAndCupModal.visible && /* @__PURE__ */ import_react.default.createElement(import_CustomerAndCupModal.default, { ...customerAndCupModal.modalProps }), settingModal.visible && /* @__PURE__ */ import_react.default.createElement(import_SettingModal.default, { ...settingModal.modalProps }));
+}

package/lib/components/ecocup/cupProject/index.less

@@ -0,0 +1,41 @@
+.ecocup-cup-project {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #292929;
+
+  &-title {
+    color: #ffffff;
+    text-align: center;
+    font-size: 40px;
+    font-weight: 300;
+  }
+
+  &-search-bar {
+    margin-top: 16px;
+    height: 60px;
+    width: 100%;
+    width: 818px;
+  }
+
+  &-actions {
+    margin-top: 132px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+
+    &-button {
+      width: 220px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 300;
+    }
+  }
+}