Merge pull request #29 from chingu-voyages/layout-predrag

Friends section

expense-splitter/src/App.jsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Layout from "./components/Layout";
 import Home from "./pages/Home";
 import Groups from "./pages/Groups";
-import Friends from "./pages/friends";
+import Friends from "./pages/Friends";
 
 function App() {
   return (

expense-splitter/src/components/Friends/FriendName.jsx

@@ -0,0 +1,11 @@
+function FriendName() {
+    return (
+      <section className="flex items-center space-x-10 ">
+        <img className="w-20 h-20 rounded-full object-cover "  src="https://img.freepik.com/free-photo/portrait-young-businesswoman-holding-eyeglasses-hand-against-gray-backdrop_23-2148029483.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1726790400&semt=ais_hybrid" alt="friend" />
+        <h1 className="text-header font-bold text-secondary">Name of Friend</h1>
+      </section>
+    );
+  }
+
+  export default FriendName;
+

expense-splitter/src/components/Friends/FriendsChart.jsx

@@ -0,0 +1,68 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+const data = [
+  { name: "Jan", Group1: 0, Group2: -10, Group3: -20 },
+  { name: "Feb", Group1: 0, Group2: 0, Group3: -10 },
+  { name: "March", Group1: 40, Group2: 20, Group3: -20 },
+  { name: "April", Group1: 40, Group2: 20, Group3: -20 },
+];
+
+// made with https://recharts.org/
+
+function FriendsChart() {
+  return (
+    <div className="bg-white p-4 rounded-lg shadow-md w-[30rem]">
+      <ResponsiveContainer width="100%" height={400}>
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 30, left: 0, bottom: 0 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend verticalAlign="top" />
+
+          <Line
+            type="monotone"
+            dataKey="Group1"
+            stroke="#3b82f6"
+            strokeWidth={3}
+            dot={{ r: 4 }}
+            activeDot={{ r: 6 }}
+          />
+
+          <Line
+            type="monotone"
+            dataKey="Group2"
+            stroke="#fca5a5"
+            strokeWidth={3}
+            dot={{ r: 4 }}
+            activeDot={{ r: 6 }}
+          />
+
+          <Line
+            type="monotone"
+            dataKey="Group3"
+            stroke="#f59e0b"
+            strokeWidth={3}
+            dot={{ r: 4 }}
+            activeDot={{ r: 6 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+
+    </div>
+  );
+}
+
+export default FriendsChart;

expense-splitter/src/components/Friends/FriendsEachMutualGroup.jsx

@@ -0,0 +1,19 @@
+function FriendsEachMutualGroup() {
+    return (
+        <article className="p-3 flex items-center space-x-4  border border-green-200">
+      <img
+        className="w-14 h-14 rounded-full object-cover"
+        src="https://media.istockphoto.com/id/1341288649/photo/75mpix-panorama-of-beautiful-mount-ama-dablam-in-himalayas-nepal.jpg?s=612x612&w=0&k=20&c=0xb_bb-NBIxjiJL_kqY-o3dCjv2PmKFZfRjHcVEijDc="
+        alt=""
+      />
+      <span>
+        <p>Group 1</p>
+        <p>You owe</p>
+      </span>
+      <p>20$</p>
+      <button className="text-primary bg-blizzard-blue px-6 py-1.5 rounded-md font-semibold text-sm">Send a reminder</button>
+    </article>
+    )
+}
+
+export default FriendsEachMutualGroup

expense-splitter/src/components/Friends/FriendsMutualGroups.jsx

@@ -0,0 +1,18 @@
+import FriendsEachMutualGroup from "./FriendsEachMutualGroup";
+
+function FriendsMutualGroups() {
+  return (
+    <article className="w-[30rem] bg-red-50 rounded-xl">
+      <div className="py-3 px-4 flex justify-between">
+        <p className="font-semibold">4 Mutual groups</p>
+        <button className="text-primary bg-blizzard-blue px-2 py-1 rounded-md">View all</button>
+      </div>
+
+      <FriendsEachMutualGroup />
+      <FriendsEachMutualGroup />
+      <FriendsEachMutualGroup />
+    </article>
+  );
+}
+
+export default FriendsMutualGroups;

expense-splitter/src/components/Friends/FriendsTable.jsx

@@ -0,0 +1,78 @@
+// static data used for maping, in future these will be states
+const friendsData = [
+  {
+    type: "Restaurant",
+    date: "2023/3/20",
+    group: "Group 3",
+    amount: "100€",
+    note: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, labore.",
+  },
+  {
+    type: "Restaurant",
+    date: "2023/3/20",
+    group: "Group 3",
+    amount: "100€",
+    note: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, labore.",
+  },
+];
+
+function FriendsTable() {
+  return (
+    <section className="overflow-x-auto rounded-lg">
+      <table className="table-auto text-left">
+        <thead className="uppercase bg-highlight text-body font-medium text-legend">
+          <tr>
+            <th scope="col" className="px-6 py-3">
+              Type
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Date
+            </th>
+
+            <th scope="col" className="px-6 py-3 whitespace-nowrap">
+              Group
+            </th>
+            <th scope="col" className="px-6 py-3 whitespace-nowrap">
+              Amount
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Note
+            </th>
+
+          </tr>
+        </thead>
+        <tbody>
+          {friendsData.map((el, index) => (
+            <tr key={index} className="bg-white border-b border-gray-100">
+              <td className="px-6 py-4 text-body font-bold text-secondary  whitespace-nowrap">
+                {el.type}
+              </td>
+              <td className="px-6 py-4 text-body font-bold text-secondary">
+                {el.date}
+              </td>
+              <td className="px-6 py-4 text-body font-bold text-secondary">
+                {el.group}
+              </td>
+              <td className="px-6 py-4 text-body font-bold text-secondary">
+                {el.amount}
+              </td>
+
+              <td className="px-6 py-4 text-body font-bold text-secondary">
+                {el.note}
+              </td>
+
+              {/* <td className="px-6 py-4 w-96">
+                <button className="text-blue-600 hover:text-primary">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Veniam, quos.
+                </button>
+              </td> */}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+}
+
+export default FriendsTable;

expense-splitter/src/components/GroupChart.jsx → expense-splitter/src/components/Groups/GroupChart.jsx

@@ -64,14 +64,14 @@ function GroupChart() {
       </PieChart>
 
       {/* Custom legend */}
-      <div className="mb-4 p-4 px-8 shadow w-52 h-30 rounded-lg bg-white shadow-custom">
+      <div className="mb-4 p-4 px-8 w-52 h-30 rounded-lg bg-white shadow-custom">
         {data.map((entry, index) => (
           <div key={index} className="flex my-2 items-center space-x-3">
             <span
               className="w-3 h-3 rounded-full"
               style={{ backgroundColor: COLORS[index] }}
             ></span>
-            <span className="text-legend font-bold text-legend">{entry.name}</span>
+            <span className="font-bold text-legend">{entry.name}</span>
           </div>
         ))}
       </div>

expense-splitter/src/components/Layout.jsx

@@ -6,8 +6,7 @@ import Sidebar from "./Sidebar";
 
 function Layout() {
   return (
-    <div className="flex  bg-blizzard-blue">
-
+    <div className="flex">
       <Sidebar />
       {/* <Members /> */}
       <div className="w-full ml-16 md:ml-56">

expense-splitter/src/pages/Friends.jsx

@@ -1,8 +1,17 @@
+import FriendsTable from "../components/Friends/FriendsTable"
+import FriendsMutualGroups from "../components/Friends/FriendsMutualGroups"
+import FriendName from "../components/Friends/FriendName"
+import FriendsChart from "../components/Friends/FriendsChart"
+
 function Friends() {
     return (
-        <div className="text-header text-secondary">
-            Friends
-        </div>
+        <section className="flex flex-col gap-5 m-6">
+            <FriendName />
+            <FriendsMutualGroups />
+            <FriendsChart />
+            <FriendsTable />
+
+        </section>
     )
 }
 

expense-splitter/src/pages/Groups.jsx

@@ -1,9 +1,9 @@
-import GroupChart from "../components/GroupChart";
-import ExpenseBar from "../components/GroupExpenseBar";
-import GroupExpenseTable from "../components/GroupExpenseTable";
-import GroupMembers from "../components/GroupMembers";
-import GroupName from "../components/GroupName";
-import GroupSmallExpenseCard from "../components/GroupSmallExpenseCard";
+import GroupChart from "../components/Groups/GroupChart";
+import ExpenseBar from "../components/Groups/GroupExpenseBar";
+import GroupExpenseTable from "../components/Groups/GroupExpenseTable";
+import GroupMembers from "../components/Groups/GroupMembers";
+import GroupName from "../components/Groups/GroupName";
+import GroupSmallExpenseCard from "../components/Groups/GroupSmallExpenseCard";
 // icons
 import { FaPiggyBank } from "react-icons/fa6";
 import { FaCartShopping } from "react-icons/fa6";