customer-module-frontend 1.0.1-beta.1

package/src/components/RightPanel/index.tsx

@@ -0,0 +1,167 @@
+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>
+  );
+};

package/src/components/Search/SearchDialog.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { Dialog, TextField } from "hiver-ui-kit-extended";
+import BuildingsIcon from "../../assets/buildings.svg";
+import Icon from "../Icon";
+import searchIcon from "../../assets/search.svg";
+
+// Dummy data array
+const dummySearchResults = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john.doe@example.com",
+    company: "Acme Corp",
+    lastContact: "2 days ago",
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane.smith@example.com",
+    company: "Tech Solutions",
+    lastContact: "1 week ago",
+  },
+  {
+    id: 3,
+    name: "Mike Johnson",
+    email: "mike.j@example.com",
+    company: "Global Industries",
+    lastContact: "3 days ago",
+  },
+];
+
+interface SearchDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const SearchDialog = ({ open, onClose }: SearchDialogProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<typeof dummySearchResults>([]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value);
+    
+    if (value.trim() === "") {
+      setSearchResults([]);
+    } else {
+      // Filter dummy data based on search query
+      const filtered = dummySearchResults.filter(
+        (item) =>
+          item.name.toLowerCase().includes(value.toLowerCase()) ||
+          item.email.toLowerCase().includes(value.toLowerCase()) ||
+          item.company.toLowerCase().includes(value.toLowerCase())
+      );
+      setSearchResults(filtered);
+    }
+  };
+
+  const StandardDialogContent = () => {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="cm:flex cm:flex-col cm:items-center cm:justify-center cm:gap-6">
+        <Icon name="search_typing" size={64} type="active" color="#0F172A" />
+        <div className="cm:text-label-small cm:text-slate-text-subtle">Start typing to search</div>
+        </div>
+      </div>
+    );
+  };
+
+  const SearchResults = () => {
+    return (
+      <div>
+        <div className="cm:text-slate-text-subtle cm:text-xs cm:font-medium cm:leading-[18px] cm:mb-2">
+          Accounts ({searchResults.length})
+        </div>
+
+        {searchResults.map((result) => (
+          <div key={result.id} className="cm:flex cm:py-1.5 cm:gap-1 cm:items-center">
+            <img src={BuildingsIcon} alt="Buildings" />
+            <div className="cm:text-slate-text-title cm:text-sm cm:font-medium cm:leading-5 cm:border-r cm:pr-1 cm:border-slate-border-light">
+              {result.company}
+            </div>
+          
+
+            <div className="cm:text-slate-text-subtle cm:text-xs cm:font-normal cm:leading-[18px]">
+              {result.email}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const Search = (
+    <TextField
+      placeholder="Search..."
+      className="cm:w-full search-input-custom"
+      iconPosition="left"
+      value={searchQuery}
+      onChange={(e) => {
+        handleSearchChange(e.target.value);
+      }}
+      icon={searchIcon}
+    />
+  );
+
+  return (
+    <>
+      <style>{`
+        .search-input-custom,
+        .search-input-custom input,
+        .search-input-custom .p-inputtext,
+        .search-input-custom .omni-textfield-input {
+          border: none !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+        .search-input-custom:hover,
+        .search-input-custom:focus,
+        .search-input-custom:focus-within,
+        .search-input-custom input:hover,
+        .search-input-custom input:focus,
+        .search-input-custom .p-inputtext:enabled:hover,
+        .search-input-custom .p-inputtext:enabled:focus,
+        .search-input-custom .omni-textfield-input:hover,
+        .search-input-custom .omni-textfield-input:focus {
+          border: none !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+      `}</style>
+      <Dialog
+      open={open}
+      variant="standard"
+      onClose={onClose}
+      onBack={onClose}
+      maxWidth="sm"
+      title={Search}
+      className="cm:bg-slate-surface-white cm:h-[360px] cm:w-[460px]"
+    >
+      {searchResults.length === 0 ? (
+        <StandardDialogContent />
+      ) : (
+        <SearchResults />
+      )}
+    </Dialog>
+    </>
+  );
+};
+
+export default SearchDialog;

package/src/components/TabsSection/index.tsx

@@ -0,0 +1,49 @@
+import { Tabs } from 'hiver-ui-kit-extended';
+import { useLocation, useNavigate } from 'react-router-dom';
+import Icon from '../Icon';
+
+export default function TabsSection() {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const paths = ['/accounts', '/contacts'];
+    const activeIndex = paths.findIndex((path) =>
+        location.pathname.startsWith(path)
+    );
+
+    const isActive = (index: number) => index === activeIndex;
+
+    const items = [
+        {
+            label: (
+                <div className="cm:flex cm:items-center cm:gap-2">
+                    <Icon name="accounts" size={16} type="active" color={isActive(0) ? '#0F172A' : '#64758B'} />
+                    Accounts
+                </div>
+            ) as unknown as string, 
+            content: '', 
+            path: '/accounts' 
+        },
+        {
+            label: (
+                <div className="cm:flex cm:items-center cm:gap-2">
+                    <Icon name="contacts" size={16} type="active" color={isActive(1) ? '#0F172A' : '#64758B'} />
+                    Contacts
+                </div>
+            ) as unknown as string, 
+            content: '', 
+            path: '/contacts'  
+        },
+    ];
+
+    const onTabChange = (e: any) => {
+        navigate(items[e.index].path);
+    };
+
+    return (
+        <div className="cm:mb-6">
+            <style>{`.p-tabview-panels { display: none; }`}</style>
+            <Tabs value={activeIndex} onTabChange={onTabChange} items={items} />
+        </div>
+    );
+}