customer-module-frontend 1.0.1-beta.1

package/src/components/AccountDetails/index.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { accountData, contactsData } from '../../constants/index';
+import accountsIcon from '../../assets/accounts.svg';
+import contactsIcon from '../../assets/contacts.svg';
+
+// Domain/Globe icon - using a simple SVG inline since we don't have a domain icon asset
+const DomainIcon: React.FC = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 1.16667C3.78 1.16667 1.16667 3.78 1.16667 7C1.16667 10.22 3.78 12.8333 7 12.8333C10.22 12.8333 12.8333 10.22 12.8333 7C12.8333 3.78 10.22 1.16667 7 1.16667ZM7 11.6667C4.6 11.6667 2.66667 9.73333 2.66667 7.35H11.3333C11.3333 9.73333 9.4 11.6667 7 11.6667ZM2.66667 6.65C2.66667 4.26667 4.6 2.33333 7 2.33333C9.4 2.33333 11.3333 4.26667 11.3333 6.65H2.66667ZM1.16667 7C1.16667 4.26667 3.26667 2.1 6 2.01667V11.9833C3.26667 11.9 1.16667 9.73333 1.16667 7ZM8 11.9833V2.01667C10.7333 2.1 12.8333 4.26667 12.8333 7C12.8333 9.73333 10.7333 11.9 8 11.9833Z" fill="#64758B"/>
+  </svg>
+);
+
+interface DetailRowProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+}
+
+const DetailRow: React.FC<DetailRowProps> = ({ icon, label, value }) => (
+  <div className="cm:flex cm:flex-col cm:items-start cm:relative cm:shrink-0 cm:w-full">
+    <div className="cm:flex cm:h-9 cm:items-center cm:relative cm:shrink-0 cm:w-full">
+      <div className="cm:flex cm:gap-2 cm:items-center cm:relative cm:shrink-0 cm:w-[100px]">
+        <div className="cm:relative cm:shrink-0 cm:w-3.5 cm:h-3.5 cm:flex cm:items-center cm:justify-center">
+          {icon}
+        </div>
+        <p className="cm:font-normal cm:leading-5 cm:text-sm cm:text-slate-text-subtle cm:w-[90px]">
+          {label}
+        </p>
+      </div>
+      <div className="cm:flex-1 cm:flex cm:gap-2 cm:h-full cm:items-center cm:min-w-0 cm:px-1 cm:py-0 cm:relative cm:shrink-0">
+        <p className="cm:font-medium cm:leading-5 cm:text-sm cm:text-slate-text-title cm:whitespace-nowrap">
+          {value}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const AccountDetails: React.FC = () => {
+  const { accountId } = useParams<{ accountId: string }>();
+
+  const account = useMemo(() => {
+    if (!accountId) return null;
+    return accountData.data.results.find(
+      (acc: { id: number }) => acc.id.toString() === accountId
+    );
+  }, [accountId]);
+
+  const contactsCount = useMemo(() => {
+    if (!account) return 0;
+    return contactsData.data.results.filter(
+      (contact: { company?: { id: number } }) => contact.company?.id === account.id
+    ).length;
+  }, [account]);
+
+  if (!account) {
+    return (
+      <div>
+        <p className="cm:text-sm cm:text-slate-text-subtle">Account not found</p>
+      </div>
+    );
+  }
+
+  const domain = account.domains?.[0]?.name || account.generated_name || 'N/A';
+
+  return (
+    <div className="cm:flex cm:flex-col cm:gap-3 cm:items-stretch cm:relative cm:shrink-0 cm:w-full">
+      {/* Account Name Section */}
+      <div className="cm:flex cm:gap-3 cm:items-center cm:relative cm:shrink-0 cm:w-full">
+        {/* Account Icon with background */}
+        <div className="cm:relative cm:shrink-0">
+          <div className="cm:bg-slate-surface-subtle_150 cm:border cm:border-slate-border-light cm:rounded-full cm:w-7 cm:h-7 cm:flex cm:items-center cm:justify-center">
+            <div className="cm:w-3.5 cm:h-3.5 cm:flex cm:items-center cm:justify-center">
+              <img src={accountsIcon} alt="account" className="cm:w-3.5 cm:h-3.5" />
+            </div>
+          </div>
+        </div>
+        <p className="cm:font-medium cm:leading-5 cm:text-sm cm:text-slate-text-title cm:whitespace-nowrap">
+          {account.name}
+        </p>
+      </div>
+
+      {/* Details Section */}
+      {/* <div className="cm:flex cm:flex-col cm:gap-0.5 cm:items-start cm:relative cm:shrink-0 cm:w-full"> */}
+        <DetailRow
+          icon={<DomainIcon />}
+          label="Domain"
+          value={domain}
+        />
+        <DetailRow
+          icon={<img src={contactsIcon} alt="contacts" className="cm:w-3.5 cm:h-3.5" />}
+          label="Contacts"
+          value={contactsCount}
+        />
+      {/* </div> */}
+    </div>
+  );
+};
+
+export default AccountDetails;
+

package/src/components/AccountsConversation/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import ConversationBox from '../ConversationBox';
+import type { ConversationBoxProps } from '../ConversationBox/types';
+
+// Sample conversation data based on the Figma design
+const conversations: Omit<ConversationBoxProps, 'onClick'>[] = [
+  {
+    type: 'chat',
+    status: 'open',
+    senderName: 'Blake Lively',
+    timestamp: 'Feb 4, 02:45 PM',
+    messagePreview: 'I am unable to access key features. The loading times are excessive, hindering my workflow. Can you please investigate?',
+    mailboxName: 'Sales',
+    assignedAgent: {
+      name: 'Alice Adams',
+    },
+  },
+  {
+    type: 'email',
+    status: 'pending',
+    senderName: 'Ryan Reynolds',
+    timestamp: 'Feb 4, 02:45 PM',
+    heading: 'Issue with the app',
+    messagePreview: 'I am having trouble with the app. It keeps crashing and I am losing data. Can you please help?',
+    mailboxName: 'Finance',
+    assignedAgent: {
+      name: 'Andy Rue',
+    },
+  },
+  {
+    type: 'chat',
+    status: 'pending',
+    senderName: 'Chris Pratt',
+    timestamp: 'Feb 4, 02:45 PM',
+    messagePreview: 'I am encountering persistent error messages when trying to save changes. This is impacting my productivity. Please assist.',
+    mailboxName: 'Sales',
+    assignedAgent: {
+      name: 'Kate Wills',
+    },
+  },
+  {
+    type: 'email',
+    status: 'closed',
+    senderName: 'Zoe Saldana',
+    timestamp: 'Feb 4, 02:45 PM',
+    heading: "Can't log in to my account",
+    messagePreview: 'I am experiencing synchronization problems across devices. My data is not updating correctly. Could you resolve this?',
+    mailboxName: 'Finance',
+    assignedAgent: {
+      name: 'Kevin Smith',
+    },
+  },
+];
+
+const AccountsConversation: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleConversationClick = () => {
+    navigate('/conversation');
+  };
+  return (
+    <div className="cm:flex cm:flex-col cm:gap-2 cm:p-6 cm:w-full">
+      {conversations.map((conversation, index) => (
+        <ConversationBox
+          key={index}
+          {...conversation}
+          onClick={handleConversationClick}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default AccountsConversation;

package/src/components/Avatar/constants.tsx

@@ -0,0 +1,45 @@
+// Generate a deterministic hash from a string
+export const generateStringHash = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
+};
+
+// Color options for labels
+export const colorOptions = [
+  "#5398cf", // light blue
+  "#d04b4f", // red
+  "#ac80b7", // violet
+  "#8789c5", // purple
+  "#e3692c", // orange
+];
+
+// Generate a deterministic color for a label
+export const getColorForLabel = (label: string | undefined): string => {
+  if (!label) return "#5398cf"; // light blue default
+
+  const hash = generateStringHash(label);
+  const index = Math.abs(hash) % colorOptions.length;
+  return colorOptions[index];
+};
+
+// Size configuration
+export const sizeConfig = {
+  small: {
+    size: "cm:w-3.5 cm:h-3.5", // 14x14
+    text: "cm:text-[8px]",
+    leading: "cm:leading-[12px]",
+  },
+  default: {
+    size: "cm:w-4 cm:h-4", // 16x16
+    text: "cm:text-[9px]",
+    leading: "cm:leading-[13.5px]",
+  },
+  large: {
+    size: "cm:w-7 cm:h-[18px]", // 28x18
+    text: "cm:text-sm",
+    leading: "cm:leading-[18px]",
+  },
+};

package/src/components/Avatar/index.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { getColorForLabel, sizeConfig } from './constants';
+
+export interface AvatarProps {
+  name: string;
+  size?: 'small' | 'default' | 'large';
+  className?: string;
+  color?: string;
+  labelName?: string;
+}
+
+const Avatar: React.FC<AvatarProps> = ({ name, size = 'default', className, color, labelName }) => {
+  // Get first letter of the name
+  const initial = name.charAt(0).toUpperCase() || 'A';
+  
+
+  const assignedColor = useMemo(() => 
+    color ? color : getColorForLabel(labelName),
+  [color, labelName]);
+
+  const avatarData = useMemo(() => ({
+    backgroundColor: assignedColor,
+  }), [assignedColor]);
+  
+  const sizeStyles = sizeConfig[size];
+  
+  return (
+    <div
+      className={`cm:flex cm:flex-col cm:items-center cm:justify-center cm:rounded-full ${sizeStyles.size} cm:shrink-0 cm:relative ${className || ''}`}
+      style={avatarData}
+    >
+      <div className="cm:flex cm:flex-col cm:gap-0 cm:items-center cm:justify-center cm:w-full cm:h-full">
+        <p className={`cm:font-medium ${sizeStyles.leading} ${sizeStyles.text} cm:text-white cm:text-center cm:whitespace-nowrap`}>
+          {initial}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Avatar;
+

package/src/components/BreadcrumbsSection/index.tsx

@@ -0,0 +1,16 @@
+import { Breadcrumb } from 'hiver-ui-kit-extended';
+import { useBreadcrumb } from '../../hooks/useBreadcrumb';
+
+const BreadcrumbsSection = () => {
+
+    const breadcrumbItems = useBreadcrumb();
+    console.log('breadcrumbItems', breadcrumbItems);
+
+    return (
+        <div className="cm:pb-2">
+            <Breadcrumb  items={breadcrumbItems} />
+        </div>
+    );
+};
+
+export default BreadcrumbsSection;

package/src/components/Card/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { CardProps } from './types';
+
+const Card: React.FC<CardProps> = ({ 
+  children, 
+  header, 
+  className = '', 
+  onClick,
+  maxWidth = 'cm:max-w-[1000px]'
+}) => {
+  return (
+    <div
+      className={`cm:bg-slate-surface-white cm:border cm:border-slate-border-light cm:rounded-[12px] cm:relative cm:w-full ${maxWidth} ${className}`}
+      onClick={onClick}
+    >
+      <div className="cm:flex cm:flex-col cm:items-start cm:overflow-clip cm:relative cm:rounded-[inherit] cm:w-full">
+        {header && (
+          <div className="cm:border-b cm:border-slate-border-light cm:box-border cm:flex cm:h-12 cm:items-center cm:px-0 cm:pr-4 cm:py-0 cm:relative cm:shrink-0 cm:w-full">
+            {header}
+          </div>
+        )}
+        <div className="cm:box-border cm:flex cm:flex-col cm:items-start cm:px-0 cm:py-0 cm:relative cm:shrink-0 cm:w-full">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
+

package/src/components/Card/types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  children: ReactNode;
+  header?: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  maxWidth?: string;
+}
+

package/src/components/ContactConversation/Converation.tsx

@@ -0,0 +1,14 @@
+import RightPanel from "../RightPanel";
+const Converation = () => {
+  return (
+    <div className="cm:flex cm:gap-4 cm:items-start cm:relative cm:shrink-0 cm:w-full cm:h-[100vh]">
+      <div className="cm:flex-1">dummy data</div>
+
+      <div className="cm:border-l cm:h-full cm:border-slate-border-light cm:w-[330px]">
+        <RightPanel />
+      </div>
+    </div>
+  );
+};
+
+export default Converation;

package/src/components/ContactConversation/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import ConversationBox from '../ConversationBox';
+import type { ConversationBoxProps } from '../ConversationBox/types';
+
+// Sample conversation data for contact - can be filtered by contact later
+const conversations: Omit<ConversationBoxProps, 'onClick'>[] = [
+  {
+    type: 'chat',
+    status: 'open',
+    senderName: 'Blake Lively',
+    timestamp: 'Feb 4, 02:45 PM',
+    messagePreview: 'I am unable to access key features. The loading times are excessive, hindering my workflow. Can you please investigate?',
+    mailboxName: 'Sales',
+    assignedAgent: {
+      name: 'Alice Adams',
+    },
+  },
+  {
+    type: 'email',
+    status: 'pending',
+    senderName: 'Ryan Reynolds',
+    timestamp: 'Feb 4, 02:45 PM',
+    heading: 'Issue with the app',
+    messagePreview: 'I am having trouble with the app. It keeps crashing and I am losing data. Can you please help?',
+    mailboxName: 'Finance',
+    assignedAgent: {
+      name: 'Andy Rue',
+    },
+  },
+  {
+    type: 'chat',
+    status: 'pending',
+    senderName: 'Chris Pratt',
+    timestamp: 'Feb 4, 02:45 PM',
+    messagePreview: 'I am encountering persistent error messages when trying to save changes. This is impacting my productivity. Please assist.',
+    mailboxName: 'Sales',
+    assignedAgent: {
+      name: 'Kate Wills',
+    },
+  },
+  {
+    type: 'email',
+    status: 'closed',
+    senderName: 'Zoe Saldana',
+    timestamp: 'Feb 4, 02:45 PM',
+    heading: "Can't log in to my account",
+    messagePreview: 'I am experiencing synchronization problems across devices. My data is not updating correctly. Could you resolve this?',
+    mailboxName: 'Finance',
+    assignedAgent: {
+      name: 'Kevin Smith',
+    },
+  },
+];
+
+const ContactConversation: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  console.log('Current route:', location.pathname);
+
+
+  const handleConversationClick = () => {
+    navigate('/conversation');
+  };
+
+  return (
+    <div className="cm:flex cm:flex-col cm:gap-2 cm:p-6 cm:w-full">
+      {conversations.map((conversation, index) => (
+        <ConversationBox
+          key={index}
+          {...conversation}
+          onClick={handleConversationClick}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ContactConversation;
+

package/src/components/ContactDetails/index.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { contactsData, accountData } from '../../constants/index';
+import accountsIcon from '../../assets/accounts.svg';
+import atTheRateIcon from '../../assets/at_the_rate.svg';
+import phoneIcon from '../../assets/phone.svg';
+import Avatar from '../Avatar';
+import EditContact from '../Contacts/EditContact';
+
+interface DetailRowProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+  valueColor?: 'default' | 'primary';
+}
+
+const DetailRow: React.FC<DetailRowProps> = ({ icon, label, value, valueColor = 'default' }) => (
+  <div className="cm:flex cm:flex-col cm:items-start cm:relative cm:shrink-0 cm:w-full">
+    <div className="cm:flex cm:h-9 cm:items-center cm:relative cm:shrink-0 cm:w-full">
+      <div className="cm:flex cm:gap-2 cm:items-center cm:relative cm:shrink-0 cm:w-[100px]">
+        <div className="cm:relative cm:shrink-0 cm:w-3.5 cm:h-3.5 cm:flex cm:items-center cm:justify-center">
+          {icon}
+        </div>
+        <p className="cm:font-normal cm:leading-5 cm:text-sm cm:text-left cm:text-slate-text-subtle cm:w-[90px]">
+          {label}
+        </p>
+      </div>
+      <div className="cm:flex-1 cm:flex cm:gap-2 cm:h-full cm:items-center cm:min-w-0 cm:px-1 cm:py-0 cm:relative cm:shrink-0">
+        <p className={`cm:font-medium cm:leading-5 cm:text-sm cm:whitespace-nowrap ${
+          valueColor === 'primary' 
+            ? 'cm:text-primary-text-default' 
+            : 'cm:text-slate-text-title'
+        }`}>
+          {value}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const ContactDetails: React.FC = () => {
+  const { contactId } = useParams<{ contactId: string }>();
+
+  const contact = useMemo(() => {
+    if (!contactId) return null;
+    return contactsData.data.results.find(
+      (cont: { id: number }) => cont.id.toString() === contactId
+    );
+  }, [contactId]);
+
+  const account = useMemo(() => {
+    if (!contact?.company?.id) return null;
+    return accountData.data.results.find(
+      (acc: { id: number }) => acc.id === contact.company.id
+    );
+  }, [contact]);
+
+  if (!contact) {
+    return (
+      <div>
+        <p className="cm:text-sm cm:text-slate-text-subtle">Contact not found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="cm:flex cm:flex-col cm:gap-[20px] cm:items-stretch cm:relative cm:shrink-0 cm:w-full">
+      {/* Contact Name Section */}
+      <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 cm:relative cm:shrink-0 cm:w-full">
+        {/* Contact Avatar */}
+        <Avatar 
+          name={contact.name} 
+          labelName={contact.name} 
+          size="large"
+          className="cm:w-[28px] cm:h-[28px]"
+        />
+        <p className="cm:font-medium cm:leading-5 cm:text-sm cm:text-slate-text-title cm:whitespace-nowrap">
+          {contact.name}
+        </p>
+      </div>
+      <EditContact />
+      </div>
+
+      {/* Details Section */}
+      {/* <div className="cm:flex cm:flex-col cm:gap-0.5 cm:items-start cm:relative cm:shrink-0 cm:w-full"> */}
+        {account && (
+          <DetailRow
+            icon={<img src={accountsIcon} alt="account" className="cm:w-3.5 cm:h-3.5" />}
+            label="Account"
+            value={account.name}
+          />
+        )}
+        <DetailRow
+          icon={<img src={atTheRateIcon} alt="email" className="cm:w-3.5 cm:h-3.5" />}
+          label="Email"
+          value={contact.email || 'N/A'}
+          valueColor="primary"
+        />
+        <DetailRow
+          icon={<img src={phoneIcon} alt="phone" className="cm:w-3.5 cm:h-3.5" />}
+          label="Phone"
+          value={contact.phone_number || 'N/A'}
+        />
+      {/* </div> */}
+    </div>
+  );
+};
+
+export default ContactDetails;
+