@liiift-studio/sales-portal 1.2.1

package/package.json

@@ -0,0 +1,87 @@
+{
+	"name": "@liiift-studio/sales-portal",
+	"version": "1.2.1",
+	"description": "Centralized sales portal package for Liiift Studio projects",
+	"main": "index.js",
+	"types": "index.d.ts",
+	"files": [
+		"index.js",
+		"index.d.ts",
+		"api/**/*.js",
+		"api/**/*.d.ts",
+		"components/**/*.js",
+		"components/**/*.d.ts",
+		"hooks/**/*.js",
+		"hooks/**/*.d.ts",
+		"utils/**/*.js",
+		"utils/**/*.d.ts",
+		"styles/**/*.js",
+		"styles/**/*.d.ts",
+		"styles/**/*.scss",
+		"data/**/*.json",
+		"README.md",
+		"SETUP.md"
+	],
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"default": "./index.js"
+		},
+		"./components/*": {
+			"types": "./components/*.d.ts",
+			"default": "./components/*.js"
+		},
+		"./hooks/*": {
+			"types": "./hooks/*.d.ts",
+			"default": "./hooks/*.js"
+		},
+		"./utils/*": {
+			"types": "./utils/*.d.ts",
+			"default": "./utils/*.js"
+		},
+		"./api/*": {
+			"types": "./api/*.d.ts",
+			"default": "./api/*.js"
+		},
+		"./styles/*": {
+			"types": "./styles/*.d.ts",
+			"default": "./styles/*"
+		}
+	},
+	"scripts": {
+		"test": "echo \"No tests yet\" && exit 0"
+	},
+	"keywords": [
+		"sales",
+		"portal",
+		"dashboard",
+		"stripe"
+	],
+	"author": "Liiift Studio",
+	"license": "UNLICENSED",
+	"peerDependencies": {
+		"@mui/material": "^5.10.0",
+		"@mui/x-charts": "^7.0.0",
+		"@mui/x-data-grid": "^8.0.0",
+		"@mui/x-date-pickers": "^7.0.0",
+		"dayjs": "^1.11.0",
+		"next": "^14.0.0",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0",
+		"slugify": "^1.6.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Liiift-Studio/sales-portal.git"
+	},
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org",
+		"access": "public"
+	},
+	"devDependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
+		"@mui/icons-material": "^5.18.0",
+		"slugify": "^1.6.6"
+	}
+}

package/styles/sales-portal.module.scss

@@ -0,0 +1,383 @@
+.contentContainer{
+    padding-top: var(--marginY, 80px);
+    @media screen and (max-width: 900px) {
+        padding-top: var(--marginYMobile, 40px);
+    }
+}
+.dash {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: var(--brand, purple);
+    margin-left: 1.5em;
+
+    &:after {
+        content: '';
+        height: 2px;
+        width: 100%;
+    }
+}
+.anchor{
+    display: block;
+    position: relative;
+    top:-80px;
+    visibility: hidden;
+    pointer-events: none;
+}
+.pageTitleContainer{
+    padding-left: var(--marginX, 30px);
+    padding-top: var(--marginY, 80px);
+    padding-bottom: calc(var(--marginY, 80px) / 2);
+    @media screen and (max-width: 900px) {
+        padding-left: 0;
+        padding-top: var(--marginYMobile, 40px);
+        padding-bottom: calc(var(--marginYMobile, 40px) / 2);
+    }
+
+    .pageTitle{
+        font-weight: 500;
+        text-transform: none;
+        letter-spacing: 0;
+    }
+}
+
+.titleContainer{
+    display:flex;
+    align-items: center;
+    white-space: nowrap;
+    :global(.MuiTypography-root){
+        font-family: 'Tomato Grotesk', sans-serif;
+    }
+}
+
+.svgContainer{
+    position: sticky;
+    top:50%;
+    height: fit-content;
+
+}
+
+.line{
+    width: 100%;
+    margin-top: 5px;
+    border-bottom: 2px solid var(--brand, purple);
+}
+
+.iconContainer{
+    display:flex;
+    width:100%;
+    .icon{
+        width: 45px;
+        aspect-ratio: 1/1;
+        object-fit: contain;
+        cursor: pointer;
+    }
+}
+
+.earningContainer {
+    border-bottom: 1px solid rgba(0, 0, 0, .25);
+}
+
+.displayLossContainer{
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.tableRow{
+    &:last-child td, &:last-child th{
+        border: 0;
+    } 
+    td{
+        max-width: 400px;
+        overflow: hidden;
+        text-overflow: ellipsis; 
+        white-space: nowrap;
+    }
+}
+.salesPortal{
+    &[data-loading="false"], [data-loading="false"]{
+        pointer-events: initial;
+        opacity: initial;
+        filter: saturate(1);
+        transition: 0.25s;
+    }
+    &[data-loading="true"], [data-loading="true"]{
+        pointer-events: none;
+        opacity: .25;
+        filter: saturate(0);
+        transition: 0.25s;
+        mix-blend-mode: multiply;
+    }
+}
+
+.salesSection{
+    padding-left: var(--marginXMobile, 15px);
+    padding-right: var(--marginXMobile, 15px);
+    margin-bottom: 28px;
+    transition: all 0.3s ease;
+    @media screen and (min-width: 900px) {
+        padding-left: var(--marginX, 30px);
+        padding-right: var(--marginX, 30px);
+    }
+}
+.exportSection{
+    overflow: hidden;
+    &::before{
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: -50%;
+        width: 200%;
+        height: 100%;
+        box-shadow: inset 0 10px 10px 0px rgba(0, 0, 0, 1);
+    }
+}
+.globeWrap {
+    position: fixed;
+    left: -25%;
+    top: -10px;
+    width: 90vw;
+    height: 90vw;
+    overflow: hidden;
+    border-radius: 50%;
+    mix-blend-mode: multiply;
+    z-index: 0;
+    opacity: .7;
+    background: radial-gradient(circle at 50% 50%,rgba(var(--greenRGB), 0.1) 40%, rgba(var(--greenRGB), .25) 50%);
+    rotate: -7deg;
+    perspective: 100px;
+    
+
+    &:hover{
+        animation: bubble-anim .5s ease-out; 
+    }
+    &:before {
+        content: "";
+        position: absolute;
+        top: 1%;
+        left: 5%;
+        width: 90%;
+        height: 90%;
+        border-radius: 100%;
+        background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
+        filter: blur(5px);
+        z-index: 2; 
+    }
+    &:after {
+        content: "";
+        position: absolute;
+        bottom: 0%;
+        right: 0%;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        background: radial-gradient(circle at top, rgba(var(--greenRGB), 0) 60%, rgba(var(--greenRGB), 1) 100%);
+        z-index: 1; 
+    }
+    .globe{
+        rotate: -3deg;
+        pointer-events: none;
+        width: 200vw;
+        filter: drop-shadow(0px -1px 0px rgba(67, 171, 95, .5));
+        object-fit: contain; 
+        animation: move 40s linear infinite;
+    }
+    .globe2{
+        position: absolute;
+        left: 200vw;
+        top: 0;
+    }
+}
+@keyframes move {
+    0% {
+        transform: translateX(0vw);
+    }
+
+    100% {
+        transform: translateX(-100vw);
+    }
+}
+@keyframes bubble-anim {
+    0% {
+        transform: scale(1) rotateZ(0deg)
+    }
+    20% {
+        transform: scaleY(0.97) scaleX(1.03);
+    }
+    48% {
+        transform: scaleY(1.1) scaleX(0.9) rotateZ(4deg);
+    }
+    68% {
+        transform: scaleY(0.98) scaleX(1.02);
+    }
+    80% {
+        transform: scaleY(1.02) scaleX(0.98);
+    }
+    97%, 100% {
+        transform: scale(1) rotateZ(0deg);
+    }
+}
+
+/* New Dashboard Styles */
+
+/* Summary Cards Styling */
+.summaryCardsContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+    
+    .summaryCard {
+        background-color: rgba(var(--blackRGB, 0, 0, 0), 0.04);
+        padding: 16px;
+        border-radius: 4px;
+        border: 1px solid rgba(var(--blackRGB, 0, 0, 0), 0.1);
+        transition: all 0.3s ease;
+        
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .cardTitle {
+            font-size: 14px;
+            color: rgba(var(--blackRGB, 0, 0, 0), 0.6);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+        }
+        
+        .cardValue {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 4px;
+        }
+        
+        .trendPositive {
+            color: var(--green);
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+        }
+        
+        .trendNegative {
+            color: var(--red);
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+        }
+        
+        .trendNeutral {
+            color: rgba(var(--blackRGB, 0, 0, 0), 0.6);
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+        }
+    }
+}
+
+/* Period Comparison Styling */
+.comparisonContainer {
+    background-color: rgba(var(--blackRGB, 0, 0, 0), 0.02);
+    border-radius: 4px;
+    margin-top: 24px;
+    padding: 20px;
+    border: 1px solid rgba(var(--blackRGB, 0, 0, 0), 0.08);
+    
+    .comparisonHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        
+        @media screen and (max-width: 900px) {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+        }
+    }
+    
+    .comparisonControls {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        
+        @media screen and (max-width: 900px) {
+            flex-wrap: wrap;
+        }
+    }
+    
+    .comparisonChart {
+        min-height: 300px;
+        border-top: 1px solid rgba(var(--blackRGB, 0, 0, 0), 0.05);
+        padding-top: 20px;
+    }
+}
+
+/* Enhanced Tables */
+.enhancedTable {
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    
+    .tableHeader {
+        background-color: rgba(var(--blackRGB, 0, 0, 0), 0.06);
+    }
+    
+    .tableFilter {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+    
+    .sortableHeader {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        
+        &:hover {
+            background-color: rgba(var(--blackRGB, 0, 0, 0), 0.1);
+        }
+    }
+    
+    .positiveValue {
+        color: var(--green);
+    }
+    
+    .negativeValue {
+        color: var(--red);
+    }
+}
+
+/* View Mode Toggle */
+.viewModeToggle {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+    
+    .toggleButton {
+        border-radius: 4px;
+        padding: 6px 12px;
+        
+        &.active {
+            background-color: rgba(var(--blackRGB, 0, 0, 0), 0.1);
+            font-weight: 500;
+        }
+    }
+}
+
+/* Animation for data updates */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fadeInAnimation {
+    animation: fadeIn 0.3s ease-out forwards;
+}

package/styles/sales-portal.theme.d.ts

@@ -0,0 +1,5 @@
+// Type definitions for sales portal theme
+
+import { Theme } from '@mui/material/styles';
+
+export const salesTheme: Theme;