datastake-daf 0.6.577 → 0.6.578

package/src/@daf/layouts/AuthLayout/components/Navbar/index.scss

@@ -0,0 +1,169 @@
+
+
+
+.auth-navbar {
+  width: 100%;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #ffffff;
+  border-bottom: 1px solid #eaecf0;
+  padding: 0 80px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
+  @media (max-width: 1200px) {
+    padding: 0 32px;
+  }
+
+  .navbar-left {
+    display: flex;
+    align-items: center;
+
+    .navbar-logo {
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  .navbar-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .language-select {
+      min-width: 110px;
+
+      .ant-select-selector {
+        background: #fff !important;
+        border: 1px solid #d0d5dd !important;
+        border-radius: 8px !important;
+        padding: 8px 12px !important;
+        height: 40px !important;
+        display: flex;
+        align-items: center;
+        transition: all 0.2s ease;
+
+        &:hover {
+          border-color: #98a2b3 !important;
+        }
+      }
+
+      .ant-select-selection-item {
+        display: flex;
+        align-items: center;
+        padding-right: 0 !important;
+      }
+
+      .language-option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .flag-icon {
+          width: 20px;
+          height: 14px;
+          object-fit: cover;
+          border-radius: 2px;
+        }
+
+        span {
+          font-size: 14px;
+          font-weight: 500;
+          color: #344054;
+        }
+      }
+
+      .ant-select-arrow {
+        color: #667085;
+        right: 12px;
+        
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+
+    .back-btn {
+      border: 1px solid #d0d5dd;
+      background: #fff;
+      border-radius: 8px;
+      padding: 10px 16px;
+      height: 40px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #344054;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+
+      &:hover {
+        background: #f9fafb;
+        border-color: #98a2b3;
+      }
+
+      &:active {
+        background: #f2f4f7;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+    .navbar-logo { height: 28px; }
+    .navbar-right { gap: 8px; }
+  }
+}
+
+.language-select-popup {
+  .ant-select-dropdown {
+    padding: 4px;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+                0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    border: none !important;
+  }
+
+  .ant-select-item {
+    border-radius: 6px;
+    padding: 8px 12px;
+    min-height: 40px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #f9fafb;
+    }
+
+    &.ant-select-item-option-selected {
+      background-color: #155eef;
+      color: #ffffff;
+      padding: 4px !important;
+
+      .language-option span {
+        color: #ffffff;
+      }
+    }
+
+    .language-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .flag-icon {
+        width: 20px;
+        height: 14px;
+        border-radius: 2px;
+      }
+
+      span {
+        font-size: 14px;
+        font-weight: 500;
+        color: #344054;
+      }
+    }
+  }
+}

package/src/@daf/layouts/AuthLayout/components/Navbar/style.js

@@ -0,0 +1,301 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
+
+// Global styles for portaled elements (dropdowns, modals, etc.)
+export const GlobalNavbarStyles = createGlobalStyle`
+  .language-select-popup {
+    .ant-select-dropdown {
+      padding: 4px;
+      background: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+                  0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+      border: none !important;
+    }
+
+    .ant-select-item {
+      border-radius: 6px;
+      padding: 8px 12px;
+      min-height: 40px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: #f9fafb;
+      }
+
+      &.ant-select-item-option-selected {
+        background-color: #f9fafb;
+        font-weight: 500;
+
+        .language-option span {
+          font-weight: 600;
+        }
+      }
+
+      .language-option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .flag-icon {
+          width: 20px;
+          height: 14px;
+          border-radius: 2px;
+        }
+
+        span {
+          font-size: 14px;
+          font-weight: 500;
+          color: #344054;
+        }
+      }
+    }
+  }
+`;
+
+const style = styled.div`
+  font-family: Outfit;
+
+  .btns {
+    display: flex;
+    gap: 12px;
+  }
+
+  .d-container {
+    width: 80vw;
+    margin-left: auto;
+    margin-right: auto;
+
+    @media (max-width: 1440px) {
+      width: 85vw;
+    }
+
+    @media (${TABLET_WIDTH}) {
+      width: calc(100vw - 4.6rem);
+    }
+  }
+
+  .flex-c {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .jus-c {
+    justify-content: center;
+  }
+
+  .d-navbar {
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+    z-index: 1000;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+
+    @media (${TABLET_WIDTH}) {
+      height: 72px;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      height: 64px;
+    }
+
+    .main-cont {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: 0 80px;
+
+      @media (max-width: 1200px) {
+        padding: 0 32px;
+      }
+
+      @media (${TABLET_WIDTH}) {
+        padding: 0 24px;
+      }
+
+      @media (${MOBILE_WIDTH}) {
+        padding: 0 16px;
+      }
+
+      .left {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .navbar-logo {
+          cursor: pointer;
+          height: 40px;
+          width: auto;
+          object-fit: contain;
+
+          @media (${MOBILE_WIDTH}) {
+            height: 32px;
+          }
+        }
+
+        img {
+          cursor: pointer;
+          height: 40px;
+          width: auto;
+          object-fit: contain;
+
+          @media (${MOBILE_WIDTH}) {
+            height: 32px;
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+
+        .language-select {
+          min-width: 100px;
+
+          .ant-select-selector {
+            padding: 8px 12px !important;
+            height: auto !important;
+            border: none !important;
+
+            .ant-select-selection-item {
+              padding: 0 !important;
+              line-height: none !important;
+              &:hover{
+                background-color: transparent !important;
+              border: none !important;
+              }
+            }
+          }
+
+          .ant-select-arrow {
+            color: #667085;
+            display: flex;
+            align-items: center;
+            height: 80%;
+          }
+        }
+
+        .language-option {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .flag-icon {
+            width: 20px;
+            height: 15px;
+            object-fit: cover;
+            border-radius: 2px;
+          }
+
+          span {
+            font-size: 14px;
+            font-weight: 500;
+            color: #344054;
+          }
+        }
+
+        .back-btn {
+          background: transparent;
+          border: 1px solid #D0D5DD;
+          border-radius: 8px;
+          padding: 8px 16px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #344054;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+
+          &:hover {
+            background: #F9FAFB;
+            border-color: #98A2B3;
+          }
+
+          &:active {
+            transform: scale(0.98);
+          }
+        }
+
+        .ant-btn {
+          font-size: 14px;
+          padding: 6px 0;
+          text-align: center;
+          width: 70px;
+
+          @media (${MOBILE_WIDTH}) {
+            padding: 3px 0;
+          }
+        }
+
+        @media (max-width: 1070px) {
+          gap: 1rem;
+        }
+      }
+    }
+  }
+
+  &.bordered {
+    .d-navbar {
+      position: relative;
+      box-shadow: unset;
+      border-bottom: 1px solid var(--base-gray-40);
+    }
+  }
+
+  .tazama-extra {
+    &.mobile {
+      display: none;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      &.mobile {
+        display: flex;
+      }
+
+      &.desktop {
+        display: none;
+      }
+    }
+
+    .ant-btn {
+      width: 90px !important;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      &.w-100 {
+        width: 100% !important;
+      }
+
+      span {
+        margin: 0 auto;
+      }
+    }
+
+    .nav-extra {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100dvh;
+      width: 100%;
+      background: white;
+      margin-left: -100%;
+      transition: 0.4s margin-left;
+
+      &.toggled {
+        margin-left: 0;
+      }
+    }
+  }
+`;
+
+export default style;

package/src/@daf/layouts/AuthLayout/index.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import AuthNavbar from "./components/Navbar/index.jsx";
+import { formatClassname } from "../../../helpers/ClassesHelper.js";
+import Style from './style';
+
+const AuthLayout = ({
+  children,
+  StyleComponent,
+  t = (key) => key,
+  title = "Welcome Back",
+  subTitle = "Please introduce yourself",
+  logo,
+  appName = "default",
+  containerClassName = "",
+  leftClassName = "",
+  rightClassName = "",
+  rightImgClassName = "",
+  rightImageUrl,
+  additionalContent,
+  showTopHeader = true,
+  showLanguageSelector = true,
+  updateLanguage,
+  showBack = false,
+  onBack,
+  backLabel = "Back",
+}) => {
+  const Wrapper = StyleComponent || "div";
+  const wrapperClassName = formatClassname([
+    "auth-layout",
+    appName,
+    containerClassName,
+  ]);
+
+  return (
+
+  
+    <>
+      {showTopHeader && (
+        <AuthNavbar
+          logo={logo}
+          appName={appName}
+          showLanguageSelector={showLanguageSelector}
+          updateLanguage={updateLanguage}
+          showBack={showBack}
+          onBack={onBack}
+          backLabel={backLabel}
+        />
+      )}
+<Style>
+      <div className="main-cont">
+        <div className={formatClassname(["d-cont left", leftClassName])}>
+          <div className="main">
+            {logo && (
+              <div className="left-logo">
+                <img src={logo} alt={`${appName} logo`} />
+              </div>
+            )}
+            <div className="left-header">
+              {title && <h2>{t(title)}</h2>}
+              {subTitle && (
+                <p>{typeof subTitle === "string" ? t(subTitle) : subTitle}</p>
+              )}
+            </div>
+            {children}
+            {additionalContent}
+          </div>
+        </div>
+
+        <div
+          className={formatClassname(["d-cont right", rightClassName])}
+          style={
+            rightImageUrl
+              ? { backgroundImage: `url(${rightImageUrl})`, backgroundSize: "cover" }
+              : {}
+          }
+        >
+          <div className={formatClassname(["right-img", rightImgClassName])} />
+        </div>
+      </div>
+      </Style>
+    </>
+  );
+};
+
+export default AuthLayout;

package/src/@daf/layouts/AuthLayout/index.scss

@@ -0,0 +1,77 @@
+.auth-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  font-family: "Outfit", sans-serif;
+
+  .main-cont {
+    flex: 1;
+    display: flex;
+    height: calc(100vh - 64px); // Subtract header height
+    transition: all 0.2s ease;
+
+    @media (max-width: 768px) {
+      flex-direction: column;
+      height: auto;
+    }
+  }
+
+  .d-cont.left {
+    width: 50%;
+    padding: 6rem 2rem;
+    display: flex;
+    justify-content: center;
+    overflow-y: auto;
+    background: #fff;
+
+    .main {
+      width: 350px;
+      margin: auto;
+
+      .left-logo img {
+        height: 40px;
+        margin-bottom: 48px;
+      }
+
+      .left-header h2 {
+        font-size: 36px;
+        font-weight: 600;
+        color: #101828;
+        margin-bottom: 12px;
+      }
+
+      .left-header p {
+        font-size: 16px;
+        color: #667085;
+      }
+    }
+  }
+
+  .d-cont.right {
+    width: 50%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  &.sbg {
+    --primary-color: #992f24;
+    .ant-btn-primary {
+      background: var(--primary-color);
+      border-color: var(--primary-color);
+    }
+  }
+
+  &.nashiriki {
+    --primary-color: #004b91;
+    .ant-btn-primary {
+      background: var(--primary-color);
+      border-color: var(--primary-color);
+    }
+  }
+}