feat : project page

src/app/dashboard/project/page.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import React, { useState } from 'react';
+import ProjectList from '@/components/Dashboard/project/ProjectList';
+import ProjectDetails from '@/components/Dashboard/project/ProjectDetails';
+import AddProject from '@/components/Dashboard/project/AddProject';
+import Button from '@/components/form/Button';
+import { Download } from 'lucide-react';
+
+type View = 'list' | 'details' | 'add';
+type Tab = 'records' | 'add';
+
+const Project = () => {
+  const [currentView, setCurrentView] = useState<View>('list');
+  const [currentTab, setCurrentTab] = useState<Tab>('records');
+  const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
+    null
+  );
+
+  const handleViewChange = (view: View, projectId?: number) => {
+    setCurrentView(view);
+    if (projectId) {
+      setSelectedProjectId(projectId);
+    }
+  };
+
+  const handleTabChange = (tab: Tab) => {
+    setCurrentTab(tab);
+    if (tab === 'records') {
+      setCurrentView('list');
+    } else {
+      setCurrentView('add');
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-10 bg-[#171720]">
+      <div className="bg-[linear-gradient(to_right,_#171720_80%,_#894DBD_150%,_#5E5EFF_150%)] ring-2 ring-white/10 rounded-lg p-8 flex justify-between items-start">
+        <div>
+          <div className="flex items-center gap-2">
+            <h2 className="text-[16px]">Total Transactions</h2>
+            <select className="bg-transparent text-[16px] text-gray-400 border-none outline-none">
+              <option className="text-[16px]">STRK</option>
+            </select>
+          </div>
+          <div className="mt-2">
+            <span className="text-[24px] font-bold">75</span>
+          </div>
+          <Button className="mt-4" variant="outline">
+            {' '}
+            <Download className="w-4 h-4" /> Download Records
+          </Button>
+        </div>
+        <div className="">
+          <img
+            src="/coin.svg"
+            alt="Transaction Icon"
+            className="w-full h-full"
+          />
+        </div>
+      </div>
+
+      <div className="border-b border-gray-800">
+        <div className="flex gap-8">
+          <button
+            className={`py-4 px-1 relative ${
+              currentTab === 'records'
+                ? 'text-white after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
+                : 'text-[#848484] hover:text-gray-300'
+            }`}
+            onClick={() => handleTabChange('records')}
+          >
+            Records
+          </button>
+          <button
+            className={`py-4 px-1 relative ${
+              currentTab === 'add'
+                ? 'text-white after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
+                : 'text-[#848484] hover:text-gray-300'
+            }`}
+            onClick={() => handleTabChange('add')}
+          >
+            Add New Project
+          </button>
+        </div>
+      </div>
+
+      <div>
+        {currentView === 'list' && (
+          <ProjectList
+            onProjectClick={(id) => handleViewChange('details', id)}
+            onAddClick={() => handleTabChange('add')}
+          />
+        )}
+        {currentView === 'details' && selectedProjectId && (
+          <ProjectDetails
+            projectId={selectedProjectId}
+            onBack={() => handleViewChange('list')}
+          />
+        )}
+        {currentView === 'add' && (
+          <AddProject onBack={() => handleTabChange('records')} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Project;

src/components/Dashboard/project/AddProject.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Button from '@/components/form/Button';
+import Input from '@/components/form/Input';
+import TextArea from '@/components/form/TextArea';
+import Select from '@/components/form/Select';
+
+interface AddProjectProps {
+  onBack: () => void;
+}
+
+const AddProject: React.FC<AddProjectProps> = ({ onBack }) => {
+  return (
+    <div className="space-y-6">
+      <button
+        className="flex items-center text-gray-400 hover:text-white"
+        onClick={onBack}
+      >
+        <svg
+          className="w-6 h-6 mr-2"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M10 19l-7-7m0 0l7-7m-7 7h18"
+          />
+        </svg>
+        Back
+      </button>
+
+      <div className="ring-2 ring-white/10 rounded-lg p-6">
+        <form className="space-y-6">
+          <div className="grid grid-cols-2 gap-6">
+            <div>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-400 mb-1">
+                    Date
+                  </label>
+                  <Input type="text" value="19/02/2027" disabled />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-400 mb-1">
+                    Project
+                  </label>
+                  <Input type="text" placeholder="Name of Project" />
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-400 mb-1">
+                    Time
+                  </label>
+                  <Input type="text" value="8:00 PM UTC" disabled />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-400 mb-1">
+                    Total Amount
+                  </label>
+                  <div className="flex gap-2">
+                    <Input type="text" placeholder="$***" />
+                    <Select
+                      options={[
+                        { value: 'USDC', label: 'USDC' },
+                        { value: 'STRK', label: 'STRK' },
+                        { value: 'FIAT', label: 'FIAT' },
+                      ]}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="col-span-2">
+            <label className="block text-sm font-medium text-gray-400 mb-1">
+              Description/Note
+            </label>
+            <TextArea
+              placeholder="Write Details of what you'll be using the funds for"
+              rows={6}
+            />
+          </div>
+
+          <div className="flex justify-end">
+            <Button type="submit">Make Request</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddProject;