Merge pull request #144 from radicalxdev/develop

PROD_DEPLOYMENT

.firebaserc

@@ -1,6 +1,6 @@
 {
   "projects": {
-    "default": "kai-ai-f63c8"
+     "default": "kai-ai-f63c8"
   },
   "targets": {
     "kai-ai-f63c8": {
@@ -12,4 +12,4 @@
     }
   },
   "etags": {}
-}
+}

.gitignore

@@ -138,4 +138,5 @@ dist
 
 # Ignore back-end build output
 **/node_modules/
-**/build/
+**/build/
+**/docs

.vscode/settings.json

@@ -3,4 +3,4 @@
     { "pattern": "./functions/*" },
     { "pattern": "./frontend/*" }
   ]
-}
+}

firestore.rules

@@ -1,9 +1,23 @@
 rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
-    match /{document=**} {
-      allow read, write: if
-          request.time < timestamp.date(2023, 6, 16);
+    match /users/{userId} {
+      allow read: if true; // Allow all read operations
+      allow write: if request.auth.uid != null; // Allow write if user is authenticated
+    }
+
+    match /chatSessions/{sessionId} {
+      allow read, write: if true; // Example rule allowing all read and write operations
+      // Adjust read and write rules as per your application's needs
+    }
+
+    match /tools/{toolId} {
+      allow read, write: if true; // Example rule allowing all read and write operations for tools
+      // Adjust read and write rules as per your application's needs
+    }
+    match /toolSessions/{sessionId} {
+      allow read: if request.auth != null; // Allow read if user is authenticated
+      allow write: if request.auth != null; // Allow write if user is authenticated
     }
   }
-}
+}

frontend/components/ToolCard/Skeleton.jsx

@@ -3,9 +3,9 @@ import { Grid, Skeleton } from '@mui/material';
 import styles from './styles';
 
 /**
- * Returns a RewardCard component with an image and a chip displaying the amount of coins.
+ * Renders a skeleton loader for a tool card.
  *
- * @return {JSX.Element} The RewardCard component.
+ * @returns {JSX.Element} The ToolCardSkeleton component.
  */
 const ToolCardSkeleton = () => {
   return (

frontend/components/ToolCard/styles.js

@@ -46,6 +46,13 @@ const styles = {
     fontFamily: 'Satoshi Bold',
     fontSize: '16px',
     color: (theme) => theme.palette.Common.White['100p'],
+    sx: {
+      display: '-webkit-box',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      width: 'calc(100% - 16px)',
+    },
   },
   contentGridProps: {
     container: true,
@@ -59,12 +66,11 @@ const styles = {
     fontFamily: 'Satoshi Regular',
     fontSize: '14px',
     color: (theme) => theme.palette.Common.White['100p'],
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
     sx: {
       display: '-webkit-box',
       WebkitLineClamp: 1,
       WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
     },
   },
   imageProps: {

frontend/components/ToolHistoryCard/Skeleton.jsx

@@ -0,0 +1,27 @@
+import { Grid, Skeleton } from '@mui/material';
+
+import styles from './styles';
+
+/**
+ * Renders a skeleton loading component for the tool history card.
+ * Uses a Grid component with specified properties and a Skeleton component with customized styling.
+ * @returns {JSX.Element} React element representing the tool card skeleton.
+ */
+const ToolCardSkeleton = () => {
+  return (
+    <Grid {...styles.mainGridProps}>
+      <Skeleton
+        variant="rectangular"
+        animation="wave"
+        height={150}
+        width="100%"
+        sx={{
+          borderRadius: '10px',
+          bgcolor: (theme) => theme.palette.Common.Black['30p'],
+        }}
+      />
+    </Grid>
+  );
+};
+
+export default ToolCardSkeleton;

frontend/components/ToolHistoryCard/ToolHistoryCard.jsx

@@ -0,0 +1,66 @@
+import { Button, Card, Grid, Typography } from '@mui/material';
+import moment from 'moment';
+import Image from 'next/image';
+
+import ToolImage from '@/assets/images/BookImage.png';
+
+import styles from './styles';
+
+import { convertToUnixTimestamp } from '@/utils/FirebaseUtils';
+import { getToolData } from '@/utils/ToolUtils';
+
+/**
+ * Renders a card component displaying information about a tool session.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.data - The data object containing the tool information.
+ * @param {function} props.onOpen - Callback function to handle opening the detailed view.
+ *
+ * @returns {JSX.Element} A React component that renders the tool history card.
+ */
+const ToolHistoryCard = (props) => {
+  const { data, onOpen } = props;
+
+  const toolData = getToolData({
+    toolId: data?.toolId,
+    item: data,
+  });
+
+  const { title, backgroundImgURL, logo, createdAt, description } = toolData;
+
+  const renderImage = () => {
+    return (
+      <Grid {...styles.imageGridProps(backgroundImgURL)}>
+        <Image src={logo || ToolImage} alt="tool logo" {...styles.imageProps} />
+      </Grid>
+    );
+  };
+
+  const renderTitle = () => {
+    return (
+      <Grid {...styles.contentGridProps}>
+        <Typography {...styles.dateProps}>
+          {moment(convertToUnixTimestamp(createdAt)).format('DD MMM YYYY')}
+        </Typography>
+        <Typography {...styles.titleProps}>{title}</Typography>
+        <Typography {...styles.descriptionProps}>{description}</Typography>
+        <Button {...styles.previewButtonProps} onClick={() => onOpen(toolData)}>
+          Preview
+        </Button>
+      </Grid>
+    );
+  };
+
+  return (
+    <Grid {...styles.mainGridProps}>
+      <Card {...styles.cardProps} elevation={6}>
+        <Grid {...styles.toolDetailsGridProps}>
+          {renderImage()}
+          {renderTitle()}
+        </Grid>
+      </Card>
+    </Grid>
+  );
+};
+
+export default ToolHistoryCard;

frontend/components/ToolHistoryCard/index.js

@@ -0,0 +1,4 @@
+import ToolCardSkeleton from './Skeleton';
+import ToolHistoryCard from './ToolHistoryCard';
+
+export { ToolHistoryCard as default, ToolCardSkeleton };

frontend/components/ToolHistoryCard/styles.js

@@ -0,0 +1,112 @@
+const styles = {
+  mainGridProps: {
+    container: true,
+    item: true,
+    desktopLarge: 6,
+    laptop: 8,
+  },
+  cardProps: {
+    elevation: 1,
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      position: 'relative',
+      height: '150px',
+      width: '600px',
+      borderRadius: '15px',
+      overflow: 'hidden',
+      flexDirection: 'column',
+      background: (theme) => theme.palette.Common.White['100p'],
+    },
+  },
+  toolDetailsGridProps: {
+    position: 'relative',
+    container: true,
+    item: true,
+    mobileSmall: 12,
+    height: '100%',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  titleProps: {
+    fontFamily: 'Satoshi Bold',
+    fontSize: '18px',
+    color: (theme) => theme.palette.Common.Black['100p'],
+    sx: {
+      display: '-webkit-box',
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      width: 'calc(100% - 160px)',
+    },
+  },
+  contentGridProps: {
+    container: true,
+    item: true,
+    mobileSmall: true,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    px: 2.5,
+    py: 1.5,
+  },
+  descriptionProps: {
+    fontFamily: 'Satoshi Regular',
+    fontSize: '12px',
+    color: (theme) => theme.palette.Common.Black['100p'],
+    sx: {
+      display: '-webkit-box',
+      WebkitLineClamp: 1,
+      overflow: 'hidden',
+      WebkitBoxOrient: 'vertical',
+      width: 'calc(100% - 160px)',
+    },
+  },
+  imageProps: {
+    width: 60,
+    height: 60,
+  },
+  imageGridProps: (backgroundImageUrl) => ({
+    position: 'relative',
+    container: true,
+    item: true,
+    alignItems: 'center',
+    justifyContent: 'center',
+    sx: {
+      backgroundColor: '#007BFF',
+      backgroundImage: backgroundImageUrl
+        ? `url(${backgroundImageUrl})`
+        : 'none',
+      backgroundSize: 'cover',
+      width: '160px',
+      height: '100%',
+    },
+  }),
+  previewButtonProps: {
+    sx: {
+      fontFamily: 'Satoshi Regular',
+      fontSize: '12px',
+      backgroundColor: '#4900E4',
+      borderRadius: '58px',
+      color: 'white',
+      textTransform: 'none',
+      marginTop: '10px',
+      '&:hover': {
+        backgroundColor: '#5E3CFF',
+        color: 'white',
+      },
+    },
+  },
+  dateProps: {
+    fontFamily: 'Satoshi Regular',
+    fontSize: '8px',
+    backgroundColor: '#AFF2DA',
+    borderRadius: '58px',
+    color: '#00976C',
+    padding: '7px',
+    textTransform: 'none',
+  },
+};
+
+export default styles;