customer-module-frontend 1.0.1-beta.1

package/src/components/CustomersLayout/index.tsx

@@ -0,0 +1,20 @@
+import { Outlet, useLocation } from "react-router-dom";
+import Header from "../Header";
+import TabsSection from "../TabsSection";
+import BreadcrumbsSection from "../BreadcrumbsSection";
+
+export default function CustomersLayout() {
+    const location = useLocation();
+    const isDetailsPage = location.pathname.includes("/accounts/") ||
+        location.pathname.includes("/contacts/");
+
+        console.log('isDetailsPage', isDetailsPage);
+    return (
+        <Header>
+            <div className="cm:pt-2 cm:px-12">
+            {isDetailsPage ? <BreadcrumbsSection /> : <TabsSection />}
+            </div>
+            <Outlet />
+        </Header>
+    );
+}

package/src/components/DetailsCard/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { DetailsCardProps } from './types';
+
+const DetailsCard: React.FC<DetailsCardProps> = ({ 
+  header, 
+  children, 
+  className = '',
+  maxWidth = 'cm:max-w-[360px]',
+  maxHeight = 'cm:h-full'
+}) => {
+  return (
+    <div
+      className={`cm:bg-slate-surface-white cm:border cm:border-slate-border-light cm:rounded-[12px] cm:relative cm:w-full ${maxWidth} ${maxHeight} ${className}`}
+    >
+      <div className="cm:flex cm:flex-col cm:items-start cm:overflow-clip cm:relative cm:rounded-[inherit] cm:w-full">
+        {/* Header Section */}
+        <div className="cm:border-b cm:border-slate-border-mild cm:box-border cm:flex cm:h-12 cm:items-center cm:pl-[21px] cm:pr-[25px] cm:py-[14px] cm:relative cm:shrink-0 cm:w-full">
+          {header}
+        </div>
+        
+        {/* Content Section */}
+        <div className="cm:box-border cm:flex cm:flex-col cm:items-start cm:overflow-clip cm:px-[21px] cm:py-5 cm:relative cm:shrink-0 cm:w-full">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailsCard;
+

package/src/components/DetailsCard/types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export interface DetailsCardProps {
+  header: ReactNode;
+  children: ReactNode;
+  className?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+}
+

package/src/components/EmptyData/NoDataFound.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NoDataImage from '../../assets/no-data.svg';
+
+export interface NoDataFoundProps {
+  title: string;
+  description: string;
+}
+
+const NoDataFound: React.FC<NoDataFoundProps> = ({ title, description }) => {
+  return (
+    <div className="cm:flex cm:flex-col cm:items-center cm:justify-center cm:w-full cm:h-full cm:py-12">
+      <div className="cm:flex cm:flex-col cm:items-center cm:gap-3">
+        <img
+          src={NoDataImage}
+          alt="No data"
+          className="cm:w-[100px] cm:h-[100px]"
+        />
+        <div className="cm:flex cm:flex-col cm:items-center cm:gap-1">
+          <p className="cm:text-body-sm cm:text-slate-text-title cm:text-center">
+            {title}
+          </p>
+          <p className="cm:text-body-meduim cm:text-slate-text-subtle cm:text-center">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NoDataFound;

package/src/components/Header/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import type { ReactNode } from "react";
+import SearchDialog from "../Search/SearchDialog";
+import { TextField } from "hiver-ui-kit-extended";
+import searchIcon from "@assets/search.svg";
+import Icon from "../Icon";
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const [isSearchDialogOpen, setIsSearchDialogOpen] = React.useState(false);
+
+  return (
+    <div className="cm:min-h-screen cm:bg-slate-surface-white">
+      {/* Header */}
+      <header className="cm:border-b cm:border-slate-border-light cm:bg-white cm:px-12 cm:h-14 cm:flex cm:items-center cm:justify-between">
+        {/* Right: Search Bar */}
+
+        <div className="cm:flex cm:items-center cm:gap-3">
+          <div className="cm:text-label-medium cm:text-slate-text-title">
+            Customers
+          </div>
+          <Icon
+            name="customers"
+            size={16}
+            type="active"
+            color="#0F172A"
+          />
+        </div>
+
+        <div className="cm:w-[300px]" onClick={()=> setIsSearchDialogOpen(true)}>
+          <TextField
+            size="small"
+            onChange={()=>setIsSearchDialogOpen(true)}
+            placeholder="Search"
+            icon={searchIcon}
+            iconPosition="left"
+          />
+
+
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main>{children}</main>
+      <SearchDialog
+        open={isSearchDialogOpen}
+        onClose={() => setIsSearchDialogOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default Layout;

package/src/components/Icon/index.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import type { IconProps } from './types';
+
+const icons = import.meta.glob('/src/assets/**/*.svg', {
+  query: '?raw',
+  import: 'default',
+});
+
+const strokeWidths: Record<string, string> = { '14': '1.1', '16': '1.3' };
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = 16,
+  type = 'active',
+  folder = '',
+  disabled = false,
+  color,
+  fill,
+  className,
+  onClick,
+}) => {
+  const [svgContent, setSvgContent] = useState<string>('');
+
+  useEffect(() => {
+    const loadIcon = async () => {
+      try {
+        const basePath = folder
+          ? `/src/assets/${folder}/${name}.svg`
+          : `/src/assets/${name}.svg`;
+
+        const loader = icons[basePath];
+        if (!loader) {
+          console.error(`[Icon] Icon '${name}' not found at ${basePath}`);
+          return;
+        }
+
+        const raw = (await loader()) as string;
+        const sizeStr = String(size);
+        const stroke = color ?? `var(--p-slate-icons-${disabled ? 'disabled' : type})`;
+        const strokeWidth = strokeWidths[sizeStr] || '1.3';
+
+        let processed = raw
+          .replace(/stroke=".*?"/g, `stroke="${stroke}"`)
+          .replace(/stroke-width=".*?"/g, `stroke-width="${strokeWidth}"`)
+          .replace(/<svg([^>]*?)>/, (_, attrs: string) => {
+            let newAttrs = attrs;
+            
+            // Update or add width
+            if (/width=".*?"/.test(newAttrs)) {
+              newAttrs = newAttrs.replace(/width=".*?"/, `width="${sizeStr}"`);
+            } else {
+              newAttrs = `${newAttrs} width="${sizeStr}"`;
+            }
+            
+            // Update or add height
+            if (/height=".*?"/.test(newAttrs)) {
+              newAttrs = newAttrs.replace(/height=".*?"/, `height="${sizeStr}"`);
+            } else {
+              newAttrs = `${newAttrs} height="${sizeStr}"`;
+            }
+
+            return `<svg${newAttrs} style="max-width: ${sizeStr}px;">`;
+          });
+
+        // Handle fill for rect elements
+        if (fill) {
+          processed = processed.replace(/<rect([^>]*?)\/?>/g, (_match, rectAttrs: string) => {
+            if (/fill="/.test(rectAttrs)) {
+              return `<rect${rectAttrs.replace(/fill=".*?"/, `fill="${fill}"`)} />`;
+            }
+            return `<rect${rectAttrs} fill="${fill}" />`;
+          });
+        }
+
+        setSvgContent(processed);
+      } catch (error) {
+        console.error(`[Icon] Error loading icon '${name}':`, error);
+      }
+    };
+
+    loadIcon();
+  }, [name, size, type, disabled, color, fill, folder]);
+
+  return (
+    <span
+      className={`cm:flex cm:items-center cm:justify-center cm:w-max ${disabled ? 'cm:cursor-not-allowed' : 'cm:cursor-inherit'} ${className || ''}`}
+      onClick={onClick}
+      dangerouslySetInnerHTML={{ __html: svgContent }}
+    />
+  );
+};
+
+export default Icon;

package/src/components/Icon/types.ts

@@ -0,0 +1,13 @@
+export type IconType = 'active' | 'inactive' | 'disabled';
+
+export interface IconProps {
+  name: string;
+  size?: number;
+  type?: IconType;
+  folder?: string;
+  disabled?: boolean;
+  color?: string;
+  fill?: string;
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+}

package/src/components/Listing/AccountTable.tsx

@@ -0,0 +1,47 @@
+import { DataTable } from "hiver-ui-kit-extended";
+import { accountData } from "../../constants/index";
+import { useNavigate } from 'react-router-dom';
+
+// Transform account results to table data
+const tableData = accountData.data.results.map((account) => ({
+  id: account.id,
+  name: account.name,
+  domain: account.domains[0]?.name || account.generated_name,
+}));
+
+const columns = [
+  {
+    id: "name",
+    field: "name",
+    label: "Account name",
+  },
+  {
+    id: "domain",
+    field: "domain",
+    label: "Domain",
+  },
+];
+
+export default function AccountTable() {
+
+  const navigate = useNavigate();
+
+  const handleAccountClick = (event: any) => {
+    const data = event.data;
+    navigate(`/accounts/${data.id}`);
+  };
+  
+  return (
+    <div className="cm:px-12">
+    <DataTable
+      scrollable={true}
+      scrollHeight="32.75rem"
+      value={tableData}
+      columns={columns}
+     
+      // @ts-ignore
+      onRowClick={handleAccountClick}
+    />
+    </div>
+  );
+}

package/src/components/Listing/ContactTable.tsx

@@ -0,0 +1,76 @@
+import { DataTable } from "hiver-ui-kit-extended";
+import { useNavigate } from 'react-router-dom';
+import { contactsData } from "../../constants/index";
+import Avatar from "../Avatar/index";
+
+// Name cell with avatar
+const NameCell = ({ name }: { name: string }) => (
+  <div className="flex items-center gap-2">
+    <Avatar name={name} labelName={name} />
+    <span className="text-sm text-slate-900">{name}</span>
+  </div>
+);
+
+// Email cell with link styling
+const EmailCell = ({ email }: { email: string }) => (
+  <span className="text-sm !text-primary-text-default" style={{ color: '#0C3E9D' }}>{email}</span>
+);
+
+// Phone cell
+const PhoneCell = ({ phone }: { phone: string }) => (
+  <span className="text-sm text-slate-900" style={{ color: '#334155' }}>{phone}</span>
+);
+
+// Account cell
+const AccountCell = ({ account }: { account: string }) => (
+  <span className="text-sm text-slate-900">{account}</span>
+);
+
+// Transform data with custom renderers
+const tableData = contactsData.data.results.map((result) => ({
+  ...result,
+  nameDisplay: <NameCell name={result.name} />,
+  emailDisplay: <EmailCell email={result.email} />,
+  phoneDisplay: <PhoneCell phone={result.phone_number || ""} />,
+  accountDisplay: <AccountCell account={result.company?.name || ""} />,
+}));
+
+const columns = [
+  {
+    id: "name",
+    field: "nameDisplay",
+    label: "Name",
+  },
+  {
+    id: "email",
+    field: "emailDisplay",
+    label: "Email",
+  },
+  {
+    id: "phone",
+    field: "phoneDisplay",
+    label: "Phone Number",
+  },
+  {
+    id: "account",
+    field: "accountDisplay",
+    label: "Account",
+  },
+];
+
+export default function ContactTable() {
+  const navigate = useNavigate();
+
+  const handleContactClick = (event: any) => {
+    const data = event.data;
+    navigate(`/contacts/${data.id}`);
+  };
+  
+  return (
+    <div className="cm:px-12">
+      <DataTable scrollable={true} scrollHeight="32.75rem" value={tableData} columns={columns}
+        // @ts-ignore
+        onRowClick={handleContactClick} />
+    </div>
+  );
+}

package/src/components/RightPanel/AccountPanel.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import ConversationBox from '../ConversationBox';
+import Icon from '../Icon';
+
+export interface AccountInfo {
+  name: string;
+  domain: string;
+  contactCount: number;
+}
+
+export interface Conversation {
+  id: string;
+  type: 'chat' | 'email';
+  status: 'open' | 'pending' | 'closed';
+  senderName: string;
+  timestamp: string;
+  heading?: string;
+  messagePreview: string;
+  mailboxName?: string;
+  assignedAgent?: {
+    name: string;
+    avatarColor?: string;
+  };
+}
+
+export interface AccountPanelProps {
+  account: AccountInfo;
+  conversations: Conversation[];
+  onConversationClick?: (conversationId: string) => void;
+}
+
+const AccountPanel: React.FC<AccountPanelProps> = ({
+  account,
+  conversations,
+  onConversationClick,
+}) => {
+  return (
+    <div className="cm:flex cm:flex-col cm:gap-3 cm:w-full">
+      {/* Account Header */}
+      <div className="cm:flex cm:flex-col cm:gap-4 cm:px-4 cm:pt-6 cm:pb-4">
+        {/* Icon and Account Name */}
+        <div className="cm:flex cm:gap-3 cm:items-center">
+          <div className="cm:w-7 cm:h-7 cm:rounded-full cm:flex cm:items-center cm:justify-center cm:shrink-0 cm:bg-slate-100">
+            <Icon name="buildings" size={14} color="#94A3B8" />
+          </div>
+          <h3 className="cm:text-base cm:font-medium cm:text-slate-text-title cm:leading-5">
+            {account.name}
+          </h3>
+        </div>
+
+        {/* Account Details */}
+        <div className="cm:flex cm:flex-col cm:gap-1">
+          {/* Domain */}
+          <AccountDetailRow
+            icon="domain"
+            label="Domain"
+            value={account.domain}
+          />
+
+          {/* Contact Count */}
+          <AccountDetailRow
+            icon="contacts"
+            label="Contact"
+            value={String(account.contactCount)}
+          />
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="cm:h-px cm:bg-slate-border-light" />
+
+      {/* Conversations Section */}
+      <div className="cm:flex cm:flex-col cm:gap-3">
+        <h4 className="cm:px-4 cm:text-sm cm:font-medium cm:text-slate-text-title cm:leading-5 cm:text-left">
+          Conversations from {account.name}
+        </h4>
+
+        {/* Conversations List */}
+        <div className="cm:flex cm:flex-col cm:gap-2 cm:px-4">
+          {conversations.map((conversation) => (
+            <ConversationBox
+              key={conversation.id}
+              type={conversation.type}
+              status={conversation.status}
+              size="small"
+              senderName={conversation.senderName}
+              timestamp={conversation.timestamp}
+              heading={conversation.heading}
+              messagePreview={conversation.messagePreview}
+              mailboxName={conversation.mailboxName}
+              assignedAgent={conversation.assignedAgent}
+              onClick={() => onConversationClick?.(conversation.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface AccountDetailRowProps {
+  icon: string;
+  label: string;
+  value: string;
+}
+
+const AccountDetailRow: React.FC<AccountDetailRowProps> = ({ icon, label, value }) => {
+  return (
+    <div className="cm:flex cm:gap-3 cm:items-center cm:h-[38px]">
+      <div className="cm:flex cm:gap-2 cm:items-center cm:min-w-[90px]">
+        <Icon name={icon} size={14} color="#64758b" />
+        <span className="cm:text-sm cm:text-slate-text-subtle cm:leading-5">
+          {label}
+        </span>
+      </div>
+      <span className="cm:text-sm cm:text-slate-text-body cm:leading-5 cm:truncate">
+        {value}
+      </span>
+    </div>
+  );
+};
+
+export default AccountPanel;

package/src/components/RightPanel/ContactPanel.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import ConversationBox from '../ConversationBox';
+import Icon from '../Icon';
+import Avatar from '../Avatar';
+import PrimaryContactsDialog from '../Contacts';
+
+export interface ContactInfo {
+  name: string;
+  email: string;
+  phone: string;
+  account: string;
+  avatarColor?: string;
+}
+
+export interface Conversation {
+  id: string;
+  type: 'chat' | 'email';
+  status: 'open' | 'pending' | 'closed';
+  senderName: string;
+  timestamp: string;
+  heading?: string;
+  messagePreview: string;
+  mailboxName?: string;
+  assignedAgent?: {
+    name: string;
+    avatarColor?: string;
+  };
+}
+
+export interface ContactPanelProps {
+  contact: ContactInfo;
+  conversations: Conversation[];
+  onConversationClick?: (conversationId: string) => void;
+}
+
+const ContactPanel: React.FC<ContactPanelProps> = ({
+  contact,
+  conversations,
+  onConversationClick,
+}) => {
+  return (
+    <div className="cm:flex cm:flex-col cm:gap-3 cm:w-full cm:max-w-[330px]">
+      {/* Contact Header */}
+      <div className="cm:flex cm:flex-col cm:gap-4 cm:px-4 cm:pt-6 cm:pb-5">
+        {/* Avatar and Name */}
+
+        <div className="cm:flex cm:items-center cm:justify-between cm:px-0 cm:rounded-[6px] cm:shrink-0">
+        <div className="cm:flex cm:gap-3 cm:items-center">
+          <Avatar
+            name={contact.name}
+            labelName={contact.name}
+            size="default"
+          />
+
+          <h3 className="cm:text-base cm:font-medium cm:text-slate-text-title cm:leading-5">
+            {contact.name}
+          </h3>
+        </div>
+        {/* <EditContact /> */}
+        <PrimaryContactsDialog />
+        </div>
+
+        {/* Contact Details */}
+        <div className="cm:flex cm:flex-col cm:gap-1">
+          {/* Email */}
+          <ContactDetailRow
+            icon="email"
+            label="Email"
+            value={contact.email}
+          />
+
+          {/* Phone */}
+          <ContactDetailRow
+            icon="phone"
+            label="Phone"
+            value={contact.phone}
+          />
+
+          {/* Account */}
+          <ContactDetailRow
+            icon="buildings"
+            label="Account"
+            value={contact.account}
+          />
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="cm:h-px cm:bg-slate-border-light" />
+
+      {/* Conversations Section */}
+      <div className="cm:flex cm:flex-col cm:gap-3 ">
+        <h4 className="cm:text-sm cm:font-medium cm:text-slate-text-title cm:leading-5 cm:text-left cm:px-4">
+          Conversations with {contact.name}
+        </h4>
+
+        {/* Conversations List */}
+        <div className="cm:flex cm:flex-col cm:gap-3 cm:px-4">
+          {conversations.map((conversation) => (
+            <ConversationBox
+              key={conversation.id}
+              type={conversation.type}
+              status={conversation.status}
+              size="small"
+              senderName={conversation.senderName}
+              timestamp={conversation.timestamp}
+              heading={conversation.heading}
+              messagePreview={conversation.messagePreview}
+              mailboxName={conversation.mailboxName}
+              assignedAgent={conversation.assignedAgent}
+              onClick={() => onConversationClick?.(conversation.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ContactDetailRowProps {
+  icon: string;
+  label: string;
+  value: string;
+}
+
+const ContactDetailRow: React.FC<ContactDetailRowProps> = ({ icon, label, value }) => {
+  return (
+    <div className="cm:flex cm:gap-3 cm:items-center cm:h-[38px]">
+      <div className="cm:flex cm:gap-2 cm:items-center cm:w-[90px] cm:shrink-0">
+        <Icon name={icon} size={14} color="#64758b" />
+        <span className="cm:text-sm cm:text-slate-text-subtle cm:leading-5">
+          {label}
+        </span>
+      </div>
+      <span className="cm:text-sm cm:text-slate-text-body cm:leading-5 cm:truncate">
+        {value}
+      </span>
+    </div>
+  );
+};
+
+export default ContactPanel;