Merge pull request 'staging' (#20) from staging into test

Reviewed-on: #20

public/.htaccess

@@ -0,0 +1,8 @@
+RewriteEngine On
+#RewriteCond %{HTTPS} !=on
+#RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
+#RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
+#RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.*) data-not-updated-or-not-found

public/.well-known/csaf/provider-metadata.json

@@ -0,0 +1,39 @@
+{
+    "csaf_version": "2.0",
+    "provider": {
+      "name": "DWD Consultancy Services",
+      "namespace": "com.siliconpin.dwd",
+      "contact_details": [
+        {
+          "name": "Suvankar Sarkar",
+          "email": "suvankar@siliconpin.com",
+          "phone": "+91-700-160-1485",
+          "website": "https://dwd.siliconpin.com/#about"
+        }
+      ],
+      "publisher": {
+        "type": "vendor",
+        "name": "SiliconPin",
+        "namespace": "com.siliconpin"
+      },
+      "distribution": {
+        "tlp_label": "WHITE",
+        "url": "https://dwd.siliconpin.com/#about",
+        "pgp_key": "https://siliconpin.com/pgp-key.asc"
+      },
+      "tracking": {
+        "id": "EX-2025-0001",
+        "status": "final",
+        "initial_release_date": "2025-03-27T12:00:00Z",
+        "current_release_date": "2025-03-27T12:00:00Z",
+        "revision_history": [
+          {
+            "number": "1.0",
+            "date": "2025-03-27T12:00:00Z",
+            "summary": "Initial release"
+          }
+        ]
+      }
+    }
+  }
+  

public/.well-known/security.txt

@@ -0,0 +1,7 @@
+Contact: mailto:suvankar@siliconpin.com
+Contact: https://siliconpin.com/contact/
+Expires: 2027-03-26T18:30:00.000Z
+Encryption: https://siliconpin.com/pgp-key.txt
+Acknowledgments: https://dwd.siliconpin.com
+Preferred-Languages: en,bn
+CSAF: https://siliconpin.com/.well-known/csaf/provider-metadata.json

public/advisory.json

@@ -0,0 +1,39 @@
+{
+    "csaf_version": "2.0",
+    "provider": {
+      "name": "DWD Consultancy Services",
+      "namespace": "com.siliconpin.dwd",
+      "contact_details": [
+        {
+          "name": "Suvankar Sarkar",
+          "email": "suvankar@siliconpin.com",
+          "phone": "+91-700-160-1485",
+          "website": "https://dwd.siliconpin.com/#about"
+        }
+      ],
+      "publisher": {
+        "type": "vendor",
+        "name": "SiliconPin",
+        "namespace": "com.siliconpin"
+      },
+      "distribution": {
+        "tlp_label": "WHITE",
+        "url": "https://dwd.siliconpin.com/#about",
+        "pgp_key": "https://siliconpin.com/pgp-key.asc"
+      },
+      "tracking": {
+        "id": "EX-2025-0001",
+        "status": "final",
+        "initial_release_date": "2025-03-27T12:00:00Z",
+        "current_release_date": "2025-03-27T12:00:00Z",
+        "revision_history": [
+          {
+            "number": "1.0",
+            "date": "2025-03-27T12:00:00Z",
+            "summary": "Initial release"
+          }
+        ]
+      }
+    }
+  }
+  

public/advisory.json.asc

@@ -0,0 +1,14 @@
+-----BEGIN PGP SIGNATURE-----
+
+iQGzBAABCAAdFiEEL0GUnJpZXELqjphXMaCR/T68rscFAmflVEgACgkQMaCR/T68
+rse45Av6A0YL6qJSBvqN6tty7j0G68yfgsjeJxtuCxXiDwUjUIU4VwHORNeddZD/
+Lx5nmYf4BgszoFjgaix8dyu87bDn2QaA13+2/GMDkc3GT8yW8bzaR/saV1J1v070
+wVhButTIM48c4NpuqFX5Kytcvm632lZdeKBFF2rFfdZ3ajd7IJMr7CYVzziJdVa8
+pR00udgBYE05ewV9W8FLMmTwWqoOIQYtYR3+YP1rhuYInZ/7dobO5aI4/eliHIBo
+xe93UET9Zo19ywbnqhas+x4wJl8roI2qWDYsjp3+gRG4Ns5Myf2puhtVxexiY4xK
+6cvra2ujOFLksykPgy5lpw2WcpFFnm9K2s9NMvLAsv+3OXZHQANL7vS5ZFXxNxyU
+fm+F5uP8LiR1IXpFcJAP3MweaDdlWhL7TZp1tuA0J/i/oCFShZypzQLb9welYVbH
+a/CPm1pavGxEIlFkSOAlMmcp945s41qYia2BFOlW1ZjsDkrAR2561aLI/O7klpNw
+VLnngQsi
+=s4sX
+-----END PGP SIGNATURE-----

public/data-not-updated-or-not-found/index.php

@@ -0,0 +1,5 @@
+<?php
+
+echo 'Data not updated or the page not found!';
+
+?>

public/humans.txt

@@ -0,0 +1 @@
+SiliconPin is a Decentralized NonProfit Organization / Group, Creating some digital freedom, if you want to join -welcome.

public/pgp-key.txt

@@ -0,0 +1,41 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=NDqk
+-----END PGP PUBLIC KEY BLOCK-----

public/public-key.asc

@@ -0,0 +1,41 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=NDqk
+-----END PGP PUBLIC KEY BLOCK-----

public/robots.txt

@@ -0,0 +1,7 @@
+User-agent: *
+Disallow: /secret-location/
+
+User-agent: *
+Allow: /
+
+Sitemap: https://siliconpin.com/sitemap.xml

public/security.txt

@@ -0,0 +1,7 @@
+Contact: mailto:suvankar@siliconpin.com
+Contact: https://siliconpin.com/contact/
+Expires: 2027-03-26T18:30:00.000Z
+Encryption: https://siliconpin.com/pgp-key.txt
+Acknowledgments: https://dwd.siliconpin.com
+Preferred-Languages: en,bn
+CSAF: https://siliconpin.com/.well-known/csaf/provider-metadata.json

public/sitemap.xml

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://siliconpin.com/</loc>
+  <lastmod>2025-03-27T14:20:53+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/services/</loc>
+  <lastmod>2025-03-27T14:20:54+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/contact/</loc>
+  <lastmod>2025-03-27T14:20:55+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/get-started/</loc>
+  <lastmod>2025-03-27T14:20:56+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/about-us/</loc>
+  <lastmod>2025-03-27T14:20:57+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/suggestion-or-report/</loc>
+  <lastmod>2025-03-27T14:20:58+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/hire-developer/</loc>
+  <lastmod>2025-03-27T14:21:00+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/hire-ai-agent/</loc>
+  <lastmod>2025-03-27T14:21:00+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/privacy-policy/</loc>
+  <lastmod>2025-03-27T14:21:02+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/terms-and-conditions/</loc>
+  <lastmod>2025-03-27T14:21:03+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/refund-policy/</loc>
+  <lastmod>2025-03-27T14:21:04+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://siliconpin.com/legal-agreement/</loc>
+  <lastmod>2025-03-27T14:21:05+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+
+
+</urlset>

src/components/Login.tsx

@@ -26,6 +26,7 @@ interface AuthResponse {
   record: UserRecord;
 }
 
+
 const LoginPage = () => {
   const [email, setEmail] = useState('suvodip@siliconpin.com');
   const [password, setPassword] = useState('Simple2pass');
@@ -35,18 +36,30 @@ const LoginPage = () => {
 
   const pb = new PocketBase("https://tst-pb.s38.siliconpin.com");
 
+  interface AuthResponse {
+    token: string;
+    record: {
+      query: string;
+      id: string;
+      email: string;
+      name: string;
+      avatar: string;
+    };
+  }
+  
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
     setStatus({ message: '', isError: false });
-
+  
     try {
       const authData = await pb.collection("users").authWithPassword(email, password);
-      
+      const avatarUrl = authData.record.avatar ? pb.files.getUrl(authData.record, authData.record.avatar) : '';
+  
       const authResponse: AuthResponse = {
         token: authData.token,
         record: {
-            query: 'new',
+          query: 'new',
           id: authData.record.id,
           email: authData.record.email,
           name: authData.record.name || '',
@@ -54,8 +67,8 @@ const LoginPage = () => {
         }
       };
       
-      await syncSessionWithBackend(authResponse);
-    //   window.location.href = '/profile';
+      await syncSessionWithBackend(authResponse, avatarUrl);
+      window.location.href = '/profile';
     } catch (error) {
       console.error("Login failed:", error);
       setStatus({ 
@@ -77,20 +90,21 @@ const LoginPage = () => {
       if (!authData?.record) {
         throw new Error("No user record found");
       }
-
+  
+      const avatarUrl = authData.record.avatar ? pb.files.getUrl(authData.record, authData.record.avatar) : '';
       const authResponse: AuthResponse = {
         token: authData.token,
         record: {
-            query: 'new',
-            id: authData.record.id,
-            email: authData.record.email || '',
-            name: authData.record.name || '',
-            avatar: authData.record.avatar || ''
+          query: 'new',
+          id: authData.record.id,
+          email: authData.record.email || '',
+          name: authData.record.name || '',
+          avatar: authData.record.avatar || ''
         }
       };
       
-      await syncSessionWithBackend(authResponse);
-    //   window.location.href = '/profile';
+      await syncSessionWithBackend(authResponse, avatarUrl);
+      window.location.href = '/profile';
     } catch (error) {
       console.error(`${provider} Login failed:`, error);
       setStatus({ 
@@ -101,22 +115,21 @@ const LoginPage = () => {
       setIsLoading(false);
     }
   };
-
-  const syncSessionWithBackend = async (authData: AuthResponse) => {
+  
+  const syncSessionWithBackend = async (authData: AuthResponse, avatarUrl: string) => {
     try {
       const response = await fetch('http://localhost:2058/host-api/v1/users/session/', {
         method: 'POST',
+        credentials: 'include', // Important for cookies
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-            query: 'new',
-            accessToken: authData.token,
-            email: authData.record.email,
-            name: authData.record.name,
-            avatar: authData.record.avatar 
-                ? pb.files.getUrl(authData.record, authData.record.avatar) 
-                : '',
-            isAuthenticated: true,
-            id: authData.record.id
+          query: 'new',
+          accessToken: authData.token,
+          email: authData.record.email,
+          name: authData.record.name,
+          avatar: avatarUrl,
+          isAuthenticated: true,
+          id: authData.record.id
         })
       });
       
@@ -128,6 +141,7 @@ const LoginPage = () => {
       console.log('Session synced with backend:', data);
     } catch (error) {
       console.error('Error syncing session:', error);
+      throw error; // Re-throw the error if you want calling functions to handle it
     }
   };
 

src/components/UpdateAvatar.tsx

@@ -0,0 +1,52 @@
+import { useState, useRef } from 'react';
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { X } from "lucide-react"; // Import an icon for the remove button
+
+export function AvatarUpload() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setSelectedFile(e.target.files[0]);
+    }
+  };
+  const handleRemoveFile = () => {
+    setSelectedFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''; // Reset file input
+    }
+  };
+  return (
+    <div className="space-y-4">
+      {!selectedFile ? (
+        <div className="space-y-2">
+        <div className="flex items-center gap-4">
+          <Label 
+            htmlFor="avatar" 
+            className="bg-primary hover:bg-primary/90 text-primary-foreground py-2 px-4 text-sm rounded-md cursor-pointer transition-colorsfocus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+            Change Avatar
+          </Label>
+          <Input type="file" id="avatar" ref={fileInputRef} accept="image/jpeg,image/png,image/gif" className="hidden" onChange={handleFileChange}/>
+          <Button variant="outline" size="sm" onClick={() => fileInputRef.current?.click()}>Browse</Button>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          JPG, GIF or PNG. 1MB max.
+        </p>
+      </div>
+      ) : (
+        <div className="flex items-center justify-between p-3 space-x-2">
+          <div className="truncate max-w-[200px]">
+            <p className="text-sm font-medium truncate">{selectedFile.name}</p>
+            <p className="text-xs text-muted-foreground">{(selectedFile.size / 1024).toFixed(2)} KB</p>
+          </div>
+          <Button size="sm" className="text-xs p-1 h-fit">Update</Button>
+          <Button size="sm" onClick={handleRemoveFile} className="bg-red-500 hover:bg-red-600 text-xs p-1 h-fit">Remove</Button>
+        </div>
+      )}
+    </div>
+  );
+}
+export default AvatarUpload;

src/components/UserProfile.tsx

@@ -7,6 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from ".
 import { Separator } from "./ui/separator";
 import { Textarea } from "./ui/textarea";
 import React, { useState, useEffect } from 'react';
+import UpdateAvatar from './UpdateAvatar';
 
 interface SessionData {
   [key: string]: any;
@@ -21,37 +22,61 @@ interface UserData {
 
 export default function ProfilePage() {
   const [userData, setUserData] = useState<UserData | null>(null);
+  const [invoiceList, setInvoiceList] = useState<any[]>([]);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchSessionData = async () => {
       try {
         const response = await fetch(
           'http://localhost:2058/host-api/v1/users/get-profile-data/', 
           {
-            credentials: 'include',
-            headers: {
-              'Accept': 'application/json',
-            }
+            credentials: 'include', // Crucial for cookies
+            headers: { 'Accept': 'application/json' }
           }
         );
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
+        
+        const data = await response.json();
+        if (!response.ok || !data.success) {
+          throw new Error(data.error || 'Session fetch failed');
         }
-        const data: UserData = await response.json();
-        // console.log('success message', data.success);
-        if(data.success === true){
-          setUserData(data);
-          // console.log('User Data', data);
-        }
-
+        setUserData(data);
+        return data.session_data;
       } catch (error) {
         console.error('Fetch error:', error);
-        setError(error instanceof Error ? error.message : 'An unknown error occurred');
+        throw error;
       }
     };
+    const getInvoiceListData = async () => {
+      try {
+        const response = await fetch('http://localhost:2058/host-api/v1/invoice/invoice-info/', {
+          method: 'GET',
+          credentials: 'include', // Crucial for cookies
+          headers: { 'Accept': 'application/json' }
+        });
+    
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+    
+        const data = await response.json();
+    
+        if (!data.success) {
+          throw new Error(data.message || 'Session fetch failed');
+        }
+    
+        setInvoiceList(data.data); // Fix: Use `data.data` instead of `data`
+        return data.data; // Fix: `session_data` does not exist in response
+      } catch (error) {
+        console.error('Fetch error:', error);
+        throw error;
+      }
+    };
+    
 
-    fetchData();
+
+    fetchSessionData();
+    getInvoiceListData();
   }, []);
 
   if (error) {
@@ -63,12 +88,10 @@ export default function ProfilePage() {
   }
   return (
     <div className="space-y-6 container mx-auto">
-      <div>
+      {/* <div>
         <h3 className="text-lg font-medium">Profile</h3>
-        <p className="text-sm text-muted-foreground">
-          Update your profile settings.
-        </p>
-      </div>
+        <p className="text-sm text-muted-foreground">Update your profile settings.</p>
+      </div> */}
       <Separator />
       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
         <div className="flex-1 lg:max-w-2xl">
@@ -85,14 +108,8 @@ export default function ProfilePage() {
                   <AvatarImage src={userData.session_data?.user_avatar} />
                   <AvatarFallback>JP</AvatarFallback>
                 </Avatar>
-                <div className="space-y-1">
-                  <Button size="sm">
-                    Change avatar
-                  </Button>
-                  <p className="text-xs text-muted-foreground">
-                    JPG, GIF or PNG. 1MB max.
-                  </p>
-                </div>
+                <UpdateAvatar />
+  
               </div>
 
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -111,7 +128,7 @@ export default function ProfilePage() {
                 <Input id="email" type="email" defaultValue={userData.session_data?.user_email || ''} />
               </div>
 
-              <div className="space-y-2">
+              {/* <div className="space-y-2">
                 <Label htmlFor="bio">Bio</Label>
                 <Textarea
                   id="bio"
@@ -119,11 +136,58 @@ export default function ProfilePage() {
                   className="resize-none"
                   rows={5}
                 />
-              </div>
+              </div> */}
             </CardContent>
           </Card>
-
           <Card className="mt-6">
+            <CardHeader>
+                <CardTitle>Billing Information</CardTitle>
+                <CardDescription>
+                  View your billing history.
+                </CardDescription>
+                {/* <CardContent> */}
+                <table className="w-full">
+                  <thead>
+                    <tr>
+                      <th className="text-left">Invoice ID</th>
+                      <th className="text-left">Date</th>
+                      <th className="text-left">Description</th>
+                      <th className="text-right">Amount</th>
+                      <th className="text-center">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {/* {
+                      invoiceList.map((invoice) => (
+                        <tr key={invoice.id}>
+                          <td>{invoice.invoice_id}</td>
+                          <td>{invoice.date}</td>
+                          <td>{invoice.description}</td>
+                          <td className="text-right">{invoice.amount}</td>
+                          <td className="text-center"><a href="">Print</a></td>
+                        </tr>
+                      ))
+                    } */}
+                    <tr>
+                      <td>dcdicdicib</td>
+                      <td>2023-10-01</td>
+                      <td>Subscription Fee</td>
+                      <td className="text-right">$10.00</td>
+                      <td className="text-center"><a href="">Print</a></td>
+                    </tr>
+                    <tr>
+                      <td>dcibcdici</td>
+                      <td>2023-09-01</td>
+                      <td>Subscription Fee</td>
+                      <td className="text-right">$10.00</td>
+                      <td className="text-center"><a href="" >Print</a></td>
+                    </tr>
+                  </tbody>
+                  </table>
+              {/* </CardContent> */}
+            </CardHeader>
+          </Card>
+          {/* <Card className="mt-6">
             <CardHeader>
               <CardTitle>Preferences</CardTitle>
               <CardDescription>
@@ -161,7 +225,7 @@ export default function ProfilePage() {
                 </Select>
               </div>
             </CardContent>
-          </Card>
+          </Card> */}
         </div>
 
         <div className="flex-1 space-y-6 lg:max-w-md">
@@ -188,8 +252,7 @@ export default function ProfilePage() {
               <Button className="mt-4">Update password</Button>
             </CardContent>
           </Card>
-
-          <Card>
+          <Card className="mt-6">
             <CardHeader>
               <CardTitle>Danger Zone</CardTitle>
               <CardDescription>
@@ -198,7 +261,7 @@ export default function ProfilePage() {
             </CardHeader>
             <CardContent>
               <div className="flex flex-col space-y-4">
-                <Button >Delete account</Button>
+                <Button className="bg-red-500 hover:bg-red-600">Delete account</Button>
                 <Button variant="outline">Export data</Button>
               </div>
             </CardContent>