nc

.env.example

@@ -0,0 +1,9 @@
+# Stripe Configuration
+# Get these from your Stripe Dashboard (https://dashboard.stripe.com/apikeys)
+
+# Stripe Publishable Key (starts with pk_test_ or pk_live_)
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
+
+# Stripe Secret Key (starts with sk_test_ or sk_live_)
+# WARNING: Keep this secret! Never commit this to version control
+STRIPE_SECRET_KEY=sk_test_your_secret_key_here

.gitignore

@@ -15,6 +15,13 @@ dist
 dist-ssr
 *.local
 
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Creative Tim
+Copyright (c) 2023 Creative Tim
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,8 +1,30 @@
 # [Material Tailwind Dashboard React](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-tailwind-dashboard-react&text=Check%20Material%20Tailwind%20Dashboard%20React%20made%20by%20@CreativeTim%20#webdesign%20#kit%20#materialdesign%20#react%20#materialtailwind%20#tailwindcss%20https://www.creative-tim.com/product/material-tailwind-dashboard-react)
 
-![version](https://img.shields.io/badge/version-2.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aissue+is%3Aclosed)
+![version](https://img.shields.io/badge/version-2.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-tailwind-dashboard-react.svg)](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aissue+is%3Aclosed)
 
-![Image](https://s3.amazonaws.com/creativetim_bucket/products/488/original/material-tailwind-react-dashboard.jpg)
+## 🚀 New Features Added
+
+This fork includes additional professional features:
+
+### 🧪 **2D Molecule Viewer & Drawing Tool**
+- Professional chemical drawing interface with accurate molecular geometry
+- CPK color scheme for atoms and proper bond visualization
+- Interactive molecule editing and drawing capabilities
+- Export functionality for molecular structures
+
+### 💳 **Stripe Payment Integration**
+- Modern pricing page design inspired by pyxis-discover.com
+- Secure Stripe payment processing with pre-built checkout forms
+- Monthly/yearly billing toggle with "Most Popular" plan highlighting
+- Complete payment flow with success/failure handling
+
+### 🔧 **Development Features**
+- Unified development workflow with single `npm run dev` command
+- Secure environment variable configuration
+- No secrets in repository - all sensitive data in `.env` file
+- Ready for production deployment
+
+![Image](https://s3.amazonaws.com/creativetim_bucket/products/488/original/material-tailwind-dashboard-react.jpg)
 
 Material Tailwind Dashboard React is our newest free Material Tailwind Admin Template based on Tailwind CSS and React. If you’re a developer looking to create an admin dashboard that is developer-friendly, rich with features, and highly customisable, here is your match. Our innovative Material Tailwind, Tailwind CSS & React dashboard comes with a beautiful design inspired by Google's Material Design and it will help you create stunning websites & web apps to delight your clients.
 
@@ -38,6 +60,7 @@ During the development of this dashboard, we have used many existing resources f
 - [Material Tailwind](https://material-tailwind.com/) - Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.
 - [Hero Icons](https://heroicons.com/) - Beautiful hand-crafted SVG icons.
 - [Apex Charts](https://apexcharts.com/) - Modern & Interactive open-source Charts.
+- [Nepcha Analytics](https://nepcha.com?ref=readme) for the analytics tool. Nepcha is already integrated with Material Tailwind Dashboard React. You can use it to gain insights into your sources of traffic.
 
 Let us know your thoughts below. And good luck with development!
 
@@ -46,6 +69,7 @@ Let us know your thoughts below. And good luck with development!
 - [Versions](#versions)
 - [Demo](#demo)
 - [Quick Start](#quick-start)
+- [Deploy](#deploy)
 - [Documentation](#documentation)
 - [File Structure](#file-structure)
 - [Browser Support](#browser-support)
@@ -62,7 +86,7 @@ Let us know your thoughts below. And good luck with development!
 | React |
 | ----- |
 
-| [![Material Tailwind Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/488/thumb/material-tailwind-react-dashboard.jpg)](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr)
+| [![Material Tailwind Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/488/thumb/material-tailwind-dashboard-react.jpg)](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr)
 
 ## Demo
 
@@ -79,13 +103,49 @@ Let us know your thoughts below. And good luck with development!
 
 Quick start options:
 
-- Downdload from [Creative Tim](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr).
+- Download from [Creative Tim](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr).
+
+## Deploy
+
+:rocket: You can deploy your own version of the template to Genezio with one click:
+
+[![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/material-tailwind-dashboard-react&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)
 
 ## Terminal Commands
 
 1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
 2. Navigate to the root ./ directory of the product and run `npm install` or `yarn install` or `pnpm install` to install our local dependencies.
 
+## 🔧 Additional Setup for New Features
+
+### Environment Configuration
+1. Copy the environment template:
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Add your Stripe API keys to `.env`:
+   ```
+   VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
+   STRIPE_SECRET_KEY=sk_test_your_secret_key_here
+   ```
+
+### Development Commands
+- **Start everything**: `npm run dev` (starts both frontend and Stripe server)
+- **Frontend only**: `npm run build` then `npm run preview`
+- **Stripe server only**: `npm run stripe-server`
+
+### Testing Payments
+- Use Stripe test card: `4242 4242 4242 4242`
+- Any future expiry date and CVC will work
+- Visit `/dashboard/paid-plans` to test the payment flow
+
+### New Pages Available
+- **Molecule Viewer**: `/dashboard/molecule-viewer` - Professional 2D chemical drawing tool
+- **Paid Plans**: `/dashboard/paid-plans` - Stripe-integrated pricing page
+
+For complete setup instructions, see `DEVELOPMENT_SETUP_COMPLETE.md`.
+
 ## Documentation
 
 The documentation for the Material Tailwind Dashboard React is hosted at our [website](https://material-tailwind.com/?ref=readme-mtdr).
@@ -137,6 +197,7 @@ At present, we officially aim to support the last two versions of the following
 - [License Agreement](https://www.creative-tim.com/license?ref=readme-mtdr)
 - [Support](https://www.creative-tim.com/contact-us?ref=readme-mtdr)
 - Issues: [Github Issues Page](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues)
+- [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website
 
 ## Reporting Issues
 
@@ -152,7 +213,7 @@ If you have questions or need help integrating the product please [contact us](h
 
 ## Licensing
 
-- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-mtdr)
+- Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-mtdr)
 - Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mtdr)
 
 ## Useful Links

index.html

@@ -1,9 +1,9 @@
 <!-- 
 =========================================================
-* Material Tailwind Dashboard React - v2.0.0
+* Material Tailwind Dashboard React - v2.1.0
 =========================================================
 * Product Page: https://www.creative-tim.com/product/material-tailwind-dashboard-react
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/material-tailwind-dashboard-react/blob/main/LICENSE.md)
 * Coded by Creative Tim
 =========================================================
@@ -15,21 +15,136 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/img/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Material Tailwind Dashboard React | By Creative Tim</title>
+    <title>Pyxis-Discovery | Macrocycles</title>
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
       rel="stylesheet"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
-      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+    <script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
+
+    <!-- 3Dmol.js for 3D visualization -->
+    <script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
+
+    <!-- RDKit.js initialization with proper error handling -->
+    <script>
+        // Global variables to track RDKit state
+        window.rdkitModule = null;
+        window.rdkitLoaded = false;
+        window.rdkitError = null;
+
+        // Function to initialize RDKit module
+        window.initRDKitModule = function() {
+            return new Promise((resolve, reject) => {
+                // Return cached module if already loaded
+                if (window.rdkitModule) {
+                    resolve(window.rdkitModule);
+                    return;
+                }
+
+                // Return cached error if previously failed
+                if (window.rdkitError) {
+                    reject(window.rdkitError);
+                    return;
+                }
+
+                // Try to load RDKit script dynamically
+                const loadRDKitScript = () => {
+                    const script = document.createElement('script');
+                    script.src = 'https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js';
+
+                    script.onload = () => {
+                        console.log('RDKit script loaded successfully');
+                        initializeRDKit();
+                    };
+
+                    script.onerror = () => {
+                        console.warn('Failed to load RDKit from unpkg, trying alternative...');
+                        // Try alternative CDN
+                        const altScript = document.createElement('script');
+                        altScript.src = 'https://cdn.jsdelivr.net/npm/@rdkit/rdkit/dist/RDKit_minimal.js';
+
+                        altScript.onload = () => {
+                            console.log('RDKit script loaded from alternative CDN');
+                            initializeRDKit();
+                        };
+
+                        altScript.onerror = () => {
+                            const error = new Error('Failed to load RDKit from all sources');
+                            window.rdkitError = error;
+                            reject(error);
+                        };
+
+                        document.head.appendChild(altScript);
+                    };
+
+                    document.head.appendChild(script);
+                };
+
+                // Function to initialize RDKit once script is loaded
+                const initializeRDKit = () => {
+                    let attempts = 0;
+                    const maxAttempts = 50; // 10 seconds timeout
+
+                    const checkAndInit = () => {
+                        attempts++;
+
+                        if (window.RDKit && typeof window.RDKit === 'function') {
+                            console.log('RDKit function available, initializing...');
+
+                            window.RDKit().then(rdkit => {
+                                console.log('RDKit initialized successfully');
+                                window.rdkitModule = rdkit;
+                                window.rdkitLoaded = true;
+                                resolve(rdkit);
+                            }).catch(error => {
+                                console.error('RDKit initialization failed:', error);
+                                window.rdkitError = error;
+                                reject(error);
+                            });
+                        } else if (attempts < maxAttempts) {
+                            setTimeout(checkAndInit, 200);
+                        } else {
+                            const error = new Error('RDKit failed to load within timeout');
+                            window.rdkitError = error;
+                            reject(error);
+                        }
+                    };
+
+                    checkAndInit();
+                };
+
+                // Check if RDKit is already available
+                if (window.RDKit && typeof window.RDKit === 'function') {
+                    initializeRDKit();
+                } else {
+                    // Load RDKit script if not already present
+                    loadRDKitScript();
+                }
+            });
+        };
+
+        // Pre-load RDKit when DOM is ready
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM ready, pre-loading RDKit...');
+            window.initRDKitModule().then(() => {
+                console.log('RDKit pre-loaded successfully');
+            }).catch(error => {
+                console.log('RDKit pre-loading failed:', error.message);
+                console.log('Components can still use fallback methods');
+            });
+        });
+    </script>
+<link
+  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+  rel="stylesheet"
+/>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+</html>