@solidstarters/solid-core-ui 1.1.74 → 1.1.77

package/dist/components/common/SolidThemeProvider.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
-
-export const SolidThemeProvider = () => {
-    const pathname = usePathname();
-    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
-    const [theme, setTheme] = useState("solid-light-purple");
-
-    useEffect(() => {
-        if (pathname.includes("/auth/")) {
-            trigger("");
-        }
-    }, [pathname, trigger]);
-
-    useEffect(() => {
-        if (pathname.includes("/auth/") && solidSettingsData?.data?.authPagesTheme) {
-            const selectedTheme =
-                solidSettingsData.data.authPagesTheme === "dark" ? "solid-dark-purple" : "solid-light-purple";
-            setTheme(selectedTheme);
-        } else {
-            setTheme("solid-light-purple");
-        }
-    }, [pathname, solidSettingsData]);
-
-    useEffect(() => {
-        // Find or create <link> element
-        let themeLink = document.getElementById("theme-css") as HTMLLinkElement;
-
-        // if (!themeLink) {
-        //     themeLink = document.createElement("link");
-        //     themeLink.id = "theme-css";
-        //     themeLink.rel = "stylesheet";
-        //     document.head.appendChild(themeLink);
-        // }
-
-        // Update theme link dynamically
-        themeLink.href = `/themes/${theme}/theme.css`;
-    }, [theme]);
-
-    return null;
-}

package/dist/components/common/error.tsx

@@ -1,30 +0,0 @@
-"use client"; // Error components must be Client Components
-
-interface CustomError extends Error {
-  errMessage: string;
-}
-
-export default function Error({
-  error,
-  reset,
-}: {
-  error: CustomError;
-  reset?: () => void;
-}) {
-  return (
-    <div>
-      <div className="d-flex justify-content-center align-items-center vh-100">
-        <div className="text-center">
-          <h2 className="display-4 fw-bold">{error?.errMessage}</h2>
-          <p className="fs-3">
-            <span className="text-danger">Opps!</span> Something went wrong!
-          </p>
-          <p className="lead">Sorry for inconvience</p>
-          <button className="btn btn-primary" onClick={() => reset?.()}>
-            Try again
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/dist/components/core/chatter/SolidChatter.tsx

@@ -1,252 +0,0 @@
-"use client"
-import React, { useState, useEffect } from 'react'
-import { SolidChatterHeader } from './SolidChatterHeader'
-import { SolidChatterDateDivider } from './SolidChatterDateDivider'
-import { SolidChatterMessageBox } from './SolidChatterMessageBox'
-import { useLazyGetchatterMessageQuery, useLazyGetchatterMessageDetailQuery } from '@/redux/api/solidChatterMessageApi'
-import qs from "qs";
-
-interface FilterState {
-    name: string;
-    startDate: Date | null;
-    endDate: Date | null;
-}
-
-export const SolidChatter = ({ solidFormViewMetaData, id, refreshChatterMessage, setRefreshChatterMessage }: { solidFormViewMetaData: any, id: string, refreshChatterMessage: boolean, setRefreshChatterMessage: (value: boolean) => void }) => {
-    const [activeTab, setActiveTab] = useState<'email-message' | 'log' | null>('email-message');
-    const [visibleBox, setVisibleBox] = useState<'email-message' | 'log' | null>(null);
-    const [messages, setMessages] = useState<any[]>([]);
-    const [filters, setFilters] = useState<FilterState>({
-        name: '',
-        startDate: null,
-        endDate: null
-    });
-
-    const queryDataChatterMessage = {
-        filters: {
-            messageType: {
-                $eqi: 'custom'
-            },
-            coModelName: {
-                $eq: solidFormViewMetaData?.data?.solidView?.model?.singularName
-            },
-            coModelEntityId: {
-                $eq: id
-            }
-        }
-    };
-
-    const queryStringChatterMessage = qs.stringify(queryDataChatterMessage, {
-        encodeValuesOnly: true,
-    });
-
-    const queryDataChatterMessageDetail = {
-        populate: ['chatterMessage', 'chatterMessage.user'],
-        filters: {
-            chatterMessage: {
-                coModelName: {
-                    $eq: solidFormViewMetaData?.data?.solidView?.model?.singularName
-                },
-                coModelEntityId: {
-                    $eq: id
-                }
-            }
-        }
-    };
-
-    const queryStringChatterMessageDetail = qs.stringify(queryDataChatterMessageDetail, {
-        encodeValuesOnly: true,
-    });
-
-    const [getchatterMessage, { data: chatterMessageData, isLoading: isCustomLoading, isError: isCustomError }] = useLazyGetchatterMessageQuery();
-    const [getchatterMessageDetail, { data: auditMessageData, isLoading: isAuditLoading, isError: isAuditError }] = useLazyGetchatterMessageDetailQuery();
-
-    useEffect(() => {
-        if (refreshChatterMessage) {
-            fetchData();
-            setRefreshChatterMessage(false);
-        }
-    }, [refreshChatterMessage]);
-
-    useEffect(() => {
-        fetchData();
-    }, [filters]);
-
-    const handleTabClick = (tab: 'email-message' | 'log') => {
-        setActiveTab(tab);
-        setVisibleBox(prev => (prev === tab ? null : tab));
-    }
-
-    const formatDate = (dateString: string) => {
-        const date = new Date(dateString);
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(yesterday.getDate() - 1);
-
-        if (date.toDateString() === today.toDateString()) {
-            return 'Today';
-        } else if (date.toDateString() === yesterday.toDateString()) {
-            return 'Yesterday';
-        } else {
-            return date.toLocaleDateString('en-US', { 
-                year: 'numeric', 
-                month: 'long', 
-                day: 'numeric' 
-            });
-        }
-    };
-
-    const groupAuditMessages = (messages: any[]) => {
-        const groupedMessages: any[] = [];
-        const timeMap = new Map();
-
-        messages.forEach((msg) => {
-            if (msg.auditType === 'audit') {
-                const timeKey = msg.time;
-                if (timeMap.has(timeKey)) {
-                    const existingMsg = timeMap.get(timeKey);
-                    existingMsg.auditRecord.push(...msg.auditRecord);
-                } else {
-                    timeMap.set(timeKey, { ...msg });
-                    groupedMessages.push(timeMap.get(timeKey));
-                }
-            } else {
-                groupedMessages.push(msg);
-            }
-        });
-
-        return groupedMessages;
-    };
-
-    const filterMessages = (messages: any[]) => {
-        console.log("Current filters:", filters);
-        return messages.filter(msg => {
-            if (filters.name && !msg.user.toLowerCase().includes(filters.name.toLowerCase())) {
-                return false;
-            }
-
-            const messageDate = new Date(msg.createdAt);
-            if (filters.startDate) {
-                const startDate = new Date(filters.startDate);
-                startDate.setHours(0, 0, 0, 0);
-                if (messageDate < startDate) {
-                    return false;
-                }
-            }
-            if (filters.endDate) {
-                const endDate = new Date(filters.endDate);
-                endDate.setHours(23, 59, 59, 999);
-                if (messageDate > endDate) {
-                    return false;
-                }
-            }
-
-            return true;
-        });
-    };
-
-    const fetchData = async () => {
-        try {
-            const customResponse = await getchatterMessage(queryStringChatterMessage).unwrap();
-            const customMessages = customResponse.data.records.map((msg: any) => ({
-                id: msg.id,
-                user: msg.user?.fullName || "System",
-                auditType: "custom",
-                message: msg.messageBody,
-                time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-                createdAt: msg.createdAt,
-                date: formatDate(msg.createdAt),
-                media: msg._media
-            }));
-
-            const auditResponse = await getchatterMessageDetail(queryStringChatterMessageDetail).unwrap();
-            const auditMessages = auditResponse.data.records.map((msg: any) => ({
-                id: msg.id,
-                user: msg.chatterMessage.user?.fullName || "System",
-                auditType: "audit",
-                time: new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-                auditRecord: [{
-                    field: msg.fieldName,
-                    previous: msg.oldValueDisplay || msg.oldValue || 'None',
-                    current: msg.newValueDisplay || msg.newValue
-                }],
-                createdAt: msg.createdAt,
-                date: formatDate(msg.createdAt)
-            }));
-
-            const allMessages = [...customMessages, ...auditMessages].sort((a, b) => 
-                new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-            );
-
-            const groupedMessages = groupAuditMessages(allMessages);
-            const filteredMessages = filterMessages(groupedMessages);
-            setMessages(filteredMessages);
-        } catch (error) {
-            console.error('Error fetching messages:', error);
-        }
-    }
-
-    const handleFilterChange = (newFilters: FilterState) => {
-        console.log("New filters received:", newFilters);
-        setFilters(prev => {
-            console.log("Previous filters:", prev);
-            const updatedFilters = {
-                name: newFilters.name,
-                startDate: newFilters.startDate,
-                endDate: newFilters.endDate
-            };
-            console.log("Updated filters:", updatedFilters);
-            return updatedFilters;
-        });
-    };
-
-    return (
-        <div className='h-full'>
-            <SolidChatterHeader 
-                id={id} 
-                refetch={fetchData} 
-                solidFormViewMetaData={solidFormViewMetaData} 
-                activeTab={activeTab} 
-                handleTabClick={handleTabClick} 
-                visibleBox={visibleBox}
-                onFilterChange={handleFilterChange}
-            />
-            <div className='p-3' style={{
-                overflowY: 'scroll',
-                height:
-                    visibleBox === 'email-message'
-                        ? 'calc(100vh - 196px)'
-                        : visibleBox === 'log'
-                            ? 'calc(100vh - 172px)'
-                            : 'calc(100vh - 65px)',
-            }}>
-                {(isCustomLoading || isAuditLoading) ? (
-                    <div className='flex align-items-center justify-content-center h-full font-medium'>
-                        Loading...
-                    </div>
-                ) : messages.length === 0 ? (
-                    <div className='flex align-items-center justify-content-center h-full font-medium'>
-                        No Data Available
-                    </div>
-                ) : (
-                    messages.map((message, index) => {
-                        const showDateDivider = index === 0 || message.date !== messages[index - 1].date;
-                        return (
-                            <div key={message.id}>
-                                {showDateDivider && <SolidChatterDateDivider date={message.date} />}
-                                <SolidChatterMessageBox
-                                    user={message.user}
-                                    auditType={message.auditType}
-                                    message={message.message}
-                                    time={message.time}
-                                    auditRecord={message.auditRecord}
-                                    media={message.media}
-                                />
-                            </div>
-                        );
-                    })
-                )}
-            </div>
-        </div>
-    )
-}

package/dist/components/core/chatter/SolidChatterDateDivider.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import styles from './chatter.module.css'
-
-interface Props {
-    date: string;
-}
-
-export const SolidChatterDateDivider = ({ date }: Props) => {
-    return (
-        <div className={styles.chatterDatetimeDivider}>
-            <div className={`${styles.chatterDividerContent} absolute`}>
-                {date}
-            </div>
-        </div>
-    )
-}

package/dist/components/core/chatter/SolidChatterHeader.tsx

@@ -1,178 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { SolidMessageComposer } from './SolidMessageComposer'
-import { Button } from 'primereact/button'
-import { Dialog } from 'primereact/dialog'
-import { Calendar } from 'primereact/calendar'
-import styles from './chatter.module.css'
-
-interface FilterState {
-    name: string;
-    startDate: Date | null;
-    endDate: Date | null;
-}
-
-interface Props {
-    activeTab: any,
-    handleTabClick: any,
-    visibleBox: any,
-    solidFormViewMetaData: any,
-    refetch: any,
-    id: any,
-    onFilterChange?: (filters: FilterState) => void;
-}
-
-export const SolidChatterHeader = (props: Props) => {
-    const { activeTab, visibleBox, handleTabClick, solidFormViewMetaData, refetch, id, onFilterChange } = props;
-    const [showFilterDialog, setShowFilterDialog] = useState(false);
-    const [filters, setFilters] = useState<FilterState>({
-        name: '',
-        startDate: null,
-        endDate: null
-    });
-    const [hasActiveFilters, setHasActiveFilters] = useState(false);
-
-    useEffect(() => {
-        const isActive = filters.name !== '' || filters.startDate !== null || filters.endDate !== null;
-        setHasActiveFilters(isActive);
-    }, [filters]);
-
-    const handleFilterClick = () => {
-        setShowFilterDialog(true);
-    };
-
-    const handleApplyFilters = () => {
-        if (onFilterChange) {
-            onFilterChange(filters);
-        }
-        setShowFilterDialog(false);
-    };
-
-    const handleClearFilters = () => {
-        const clearedFilters = {
-            name: '',
-            startDate: null,
-            endDate: null
-        };
-        setFilters(clearedFilters);
-        if (onFilterChange) {
-            onFilterChange(clearedFilters);
-        }
-        setShowFilterDialog(false);
-    };
-
-    return (
-        <div className={styles.chatterTitle}>
-            <div className='flex justify-content-between align-items-center'>
-                <div className="form-wrapper-title">
-                    Activity
-                </div>
-                <div className='flex align-items-center gap-2'>
-                    <Button
-                        label="Send Message"
-                        size="small"
-                        type="button"
-                        onClick={() => handleTabClick('email-message')}
-                        {...(activeTab !== 'email-message' && {
-                            severity: 'secondary',
-                            outlined: true,
-                        })}
-                    />
-                    <Button
-                        label="Log Note"
-                        size="small"
-                        type="button"
-                        onClick={() => handleTabClick('log')}
-                        {...(activeTab !== 'log' && {
-                            severity: 'secondary',
-                            outlined: true,
-                        }
-                        )}
-                    />
-                    <Button
-                        icon="pi pi-filter-fill"
-                        text
-                        size='small'
-                        severity="secondary"
-                        aria-label="Filter"
-                        style={{ 
-                            width: 20,
-                            color: hasActiveFilters ? '#722ED1' : undefined
-                        }}
-                        onClick={handleFilterClick}
-                    />
-                </div>
-            </div>
-            {visibleBox &&
-                <div className='mt-4'>
-                    {visibleBox === "email-message" &&
-                        <SolidMessageComposer id={id} refetch={refetch} solidFormViewMetaData={solidFormViewMetaData} type={"email"} />
-                    }
-
-                    {visibleBox === "log" &&
-                        <SolidMessageComposer id={id} refetch={refetch} solidFormViewMetaData={solidFormViewMetaData} />
-                    }
-                </div>
-            }
-            <Dialog 
-                header="Filter Messages" 
-                visible={showFilterDialog} 
-                style={{ width: 500 }} 
-                onHide={() => setShowFilterDialog(false)}
-            >
-                <div className="p-fluid">
-                    <div className="flex flex-column gap-2">
-                        <label htmlFor="name">Name:</label>
-                        <input
-                            type="text"
-                            id="name"
-                            name="name"
-                            placeholder="Filter By User"
-                            className="p-inputtext p-inputtext-sm p-component"
-                            value={filters.name}
-                            onChange={(e) => setFilters(prev => ({ ...prev, name: e.target.value }))}
-                        />
-                    </div>
-                    <div className="flex flex-column gap-2 mt-3">
-                        <label htmlFor="dateRange">Date Range</label>
-                        <div className="flex gap-2">
-                            <div className="flex-1">
-                                <Calendar
-                                    id="startDate"
-                                    value={filters.startDate}
-                                    onChange={(e) => setFilters(prev => ({ ...prev, startDate: e.value as Date }))}
-                                    placeholder="Start Date"
-                                    showIcon
-                                    dateFormat="dd/mm/yy"
-                                    className="w-full"
-                                />
-                            </div>
-                            <div className="flex-1">
-                                <Calendar
-                                    id="endDate"
-                                    value={filters.endDate}
-                                    onChange={(e) => setFilters(prev => ({ ...prev, endDate: e.value as Date }))}
-                                    placeholder="End Date"
-                                    showIcon
-                                    dateFormat="dd/mm/yy"
-                                    className="w-full"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex justify-content-end gap-2 mt-4">
-                        <Button 
-                            label="Clear" 
-                            severity="secondary" 
-                            outlined 
-                            onClick={handleClearFilters}
-                        />
-                        <Button 
-                            label="Apply" 
-                            onClick={handleApplyFilters}
-                        />
-                    </div>
-                </div>
-            </Dialog>
-        </div>
-    )
-}

package/dist/components/core/chatter/SolidChatterMessageBox.tsx

@@ -1,165 +0,0 @@
-import React, { useMemo, useState } from 'react'
-import styles from './chatter.module.css'
-import { Avatar } from 'primereact/avatar'
-import { stringToColor, getTextColor } from '@/helpers/getRandomColors'
-import { RightArrowSvg } from '@/components/Svg/RightArrowSvg'
-import { Dialog } from 'primereact/dialog';
-import Image from 'next/image';
-
-interface Props {
-    user: string,
-    auditType?: string,
-    message?: any,
-    time?: string,
-    auditRecord?: any,
-    media?: {
-        messageAttachments?: Array<{
-            id: number;
-            relativeUri: string;
-            mimeType: string;
-            originalFileName: string;
-            _full_url: string;
-        }>;
-    };
-}
-
-const getFileIcon = (mimeType: string) => {
-    if (mimeType.startsWith('image/')) {
-        return 'pi pi-image';
-    }
-    switch (mimeType) {
-        case 'application/pdf':
-            return 'pi pi-file-pdf';
-        case 'application/vnd.ms-excel':
-        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-            return 'pi pi-file-excel';
-        case 'application/msword':
-        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-            return 'pi pi-file-word';
-        case 'text/plain':
-            return 'pi pi-file';
-        default:
-            return 'pi pi-file';
-    }
-};
-
-export const SolidChatterMessageBox = (props: Props) => {
-    const { user, auditType, message, time, auditRecord, media } = props;
-    const [selectedImage, setSelectedImage] = useState<string | null>(null);
-    const [isImageDialogVisible, setIsImageDialogVisible] = useState(false);
-
-    const avatarStyle = useMemo(() => {
-        const bg = stringToColor(user)
-        const color = getTextColor(bg)
-        return { backgroundColor: bg, color, height: 24, width: 24, fontSize: 10, fontWeight: 600 }
-    }, [user])
-
-    const handleImageClick = (url: string) => {
-        setSelectedImage(url);
-        setIsImageDialogVisible(true);
-    };
-
-    return (
-        <div className={styles.solidChatterMessageBox}>
-            <div className='flex align-items-center'>
-                <div style={{ width: 32 }}>
-                    <Avatar label={user.charAt(0).toUpperCase()} style={avatarStyle} shape="circle" />
-                </div>
-                <div className='flex align-items-center justify-content-between' style={{ width: '100%' }}>
-                    <div className='text-sm'>
-                        <span className='font-bold'>{user}</span>
-                        <span className='ml-2' style={{ color: '#949494' }}>
-                            {auditType === "fieldChange" ? 'Fields changed' : 'Sent message'}
-                        </span>
-                    </div>
-                    <i className='pi pi-ellipsis-v text-xs' />
-                </div>
-            </div>
-            <div className='flex align-items-center mt-1'>
-                <div style={{ width: 32 }}>
-                </div>
-                <div style={{ width: '100%' }}>
-                    <p className='mb-1 text-sm font-bold' style={{ color: '#949494' }}>
-                        {time}
-                    </p>
-                    <div className={styles.solidMessageWrapper}>
-                        {auditType === "audit" ? (
-                            <div className='flex flex-column gap-2'>
-                                {auditRecord.map((item: any, index: number) => (
-                                    <div key={index} className='flex gap-2'>
-                                        <span className='m-0 text-sm'>
-                                            {"(" + item.field + ")"}
-                                        </span>
-                                        <span className='m-0 text-sm font-bold'>
-                                            {item.previous}
-                                        </span>
-                                        <RightArrowSvg />
-                                        <span className='m-0 text-sm font-bold text-primary'>
-                                            {item.current}
-                                        </span>
-                                    </div>
-                                ))}
-                            </div>
-                        ) : (
-                            <p className='m-0 text-sm'>
-                                {message}
-                            </p>
-                        )}
-                    </div>
-                    {media?.messageAttachments && media.messageAttachments.length > 0 && (
-                        <div className='flex flex-wrap gap-2 mt-2'>
-                            {media.messageAttachments.map((attachment) => {
-                                const isImage = attachment.mimeType.startsWith('image/');
-                                return (
-                                    <div key={attachment.id} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
-                                        {isImage ? (
-                                            <div 
-                                                className='cursor-pointer'
-                                                onClick={() => handleImageClick(attachment._full_url)}
-                                            >
-                                                <Image
-                                                    src={encodeURI(attachment._full_url)}
-                                                    alt={attachment.originalFileName}
-                                                    width={50}
-                                                    height={50}
-                                                    className='rounded'
-                                                    style={{ objectFit: 'cover' }}
-                                                />
-                                            </div>
-                                        ) : (
-                                            <a 
-                                                href={encodeURI(attachment._full_url)}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className='flex align-items-center gap-2 text-decoration-none'
-                                            >
-                                                <i className={getFileIcon(attachment.mimeType)} />
-                                                <span className='text-sm'>{attachment.originalFileName}</span>
-                                            </a>
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    )}
-                </div>
-            </div>
-            <Dialog
-                visible={isImageDialogVisible}
-                onHide={() => setIsImageDialogVisible(false)}
-                className='w-9'
-                modal
-            >
-                {selectedImage && (
-                    <Image
-                        src={selectedImage}
-                        alt="Preview"
-                        width={800}
-                        height={600}
-                        style={{ width: '100%', height: 'auto' }}
-                    />
-                )}
-            </Dialog>
-        </div>
-    )
-}