customer-module-frontend 1.0.1-beta.1 → 1.0.1-beta.2

package/src/components/Icon/types.ts

@@ -1,13 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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;

package/src/components/RightPanel/index.tsx

@@ -1,167 +0,0 @@
-import { useState } from 'react';
-import Icon from '../Icon';
-import { Tabs } from 'hiver-ui-kit-extended';
-import ContactPanel from './ContactPanel';
-import AccountPanel from './AccountPanel';
-import type { ContactInfo, Conversation } from './ContactPanel';
-import type { AccountInfo, Conversation as AccountConversation } from './AccountPanel';
-
-// Sample data for the Contact Panel
-const sampleContact: ContactInfo = {
-  name: 'John Acme',
-  email: 'john.acme@company.com',
-  phone: '+91 9890876545',
-  account: 'Google',
-  avatarColor: '#E37144',
-};
-
-const sampleConversations: Conversation[] = [
-  {
-    id: '1',
-    type: 'email',
-    status: 'open',
-    senderName: 'Carson Daily',
-    timestamp: 'Dec 12, 11:22 AM',
-    heading: 'Login issues',
-    messagePreview: 'I am having trouble with the app. It keeps cras...',
-    mailboxName: 'Finance',
-    assignedAgent: {
-      name: 'Zackary Smith',
-    },
-  },
-  {
-    id: '2',
-    type: 'chat',
-    status: 'closed',
-    senderName: 'Gigi Hadid',
-    timestamp: 'Jan 2, 09:56 AM',
-    messagePreview: 'I am unable to access key features. The loadin...',
-    mailboxName: 'Sales',
-    assignedAgent: {
-      name: 'Jolie Dale',
-    },
-  },
-];
-
-// Sample data for the Account Panel
-const sampleAccount: AccountInfo = {
-  name: 'Google',
-  domain: 'google.com',
-  contactCount: 122,
-};
-
-const sampleAccountConversations: AccountConversation[] = [
-  {
-    id: '1',
-    type: 'email',
-    status: 'open',
-    senderName: 'Carson Daily',
-    timestamp: 'Dec 12, 11:22 AM',
-    heading: 'Login issues',
-    messagePreview: 'I am having trouble with the app. It keeps cras...',
-    mailboxName: 'Finance',
-    assignedAgent: {
-      name: 'Zackary Smith',
-    },
-  },
-  {
-    id: '2',
-    type: 'email',
-    status: 'pending',
-    senderName: 'Lana Del Rey',
-    timestamp: 'Mar 7, 01:33 PM',
-    heading: "Can't connect to server",
-    messagePreview: 'I am having trouble with the app. It keeps cras...',
-    mailboxName: 'Finance',
-    assignedAgent: {
-      name: 'Zackary Smith',
-    },
-  },
-  {
-    id: '3',
-    type: 'chat',
-    status: 'closed',
-    senderName: 'Gigi Hadid',
-    timestamp: 'Jan 2, 09:56 AM',
-    messagePreview: 'I am unable to access key features. The loadin...',
-    mailboxName: 'Sales',
-    assignedAgent: {
-      name: 'Jolie Dale',
-    },
-  },
-];
-
-const RightPanel = () => {
-  const [activeTab, setActiveTab] = useState<number>(1);
-
-  const tabItems = [
-    {
-      label: <Icon name="sm_slider" size={16} disabled color="#334155"/> as unknown as string,
-      content: <div>Slider</div>,
-      disabled: true,
-    },
-    {
-      label: <Icon name="sm_contacts" size={16} color="#334155" /> as unknown as string,
-      content: <ContactsTabs />,
-    },
-    {
-      label: <Icon name="sm_inbox" size={16} disabled color="#334155" /> as unknown as string,
-      content: <div>Inbox</div>,
-      disabled: true,
-    },
-  ];
-
-  return (
-    <div className="h-[100vh] bg-white [&_.p-tabview-panels]:p-0">
-      <Tabs
-        value={activeTab}
-        onTabChange={(e: { index: number }) => setActiveTab(e.index)}
-        items={tabItems}
-      />
-    </div>
-  );
-};
-
-export default RightPanel;
-
-const ContactsTabs = () => {
-  const [activeTab, setActiveTab] = useState<number>(0);
-
-  const handleConversationClick = (conversationId: string) => {
-    console.log('Conversation clicked:', conversationId);
-  };
-
-  const tabItems = [
-    {
-      label: 'Contact',
-      content: (
-        <ContactPanel
-          contact={sampleContact}
-          conversations={sampleConversations}
-          onConversationClick={handleConversationClick}
-        />
-      ),
-    },
-    {
-      label: 'Account',
-      content: (
-        <AccountPanel
-          account={sampleAccount}
-          conversations={sampleAccountConversations}
-          onConversationClick={handleConversationClick}
-        />
-      ),
-    },
-  ];
-
-  return (
-    <div className="[&_.p-tabview-panels]:p-0">
-      <Tabs
-        value={activeTab}
-        onTabChange={(e: { index: number }) => setActiveTab(e.index)}
-        items={tabItems}
-        className="!h-[100px]"
-      />
-    </div>
-  );
-};